Javascript 在foreach（模型中的项）循环中获取特定的表行数据

我正在使用中的foreach（模型中的项）循环来创建包含项属性的表行。我试图得到一个脚本，当我点击表行中的每个按钮将它们添加到我的本地存储时，它就可以工作了。我可以设法更改单击按钮的颜色，但无法从td获取所有数据。 代码如下：

<table class="table" id="myTable">
        <tr>
            <th>
                Exercise Name
            </th>
            <th>
                Number of repetitions
            </th>
            <th>
                Number of series
            </th>
            <th>
                Image
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr class="exercise" id="exercise-@item.IdExercise">
                <td class="exerciseName">
                    @Html.DisplayFor(modelItem => item.ExerciseName)
                </td>
                <td>
                    <input type="number" id="exerciseForm" style="font-size:20px;" />
                </td>
                <td>
                    <input type="number" id="exerciseForm" style="font-size:20px;" />
                </td>
                <td>
                    <img src="@Url.Content(item.ImageLink01)" alt="Image" style="max-height:300px;max- 
                     width:300px;" class="exerciseImage01" />
                    <img src="@Url.Content(item.ImageLink02)" alt="Image" style="max-height:300px; max- 
                     width:300px; display:none;" class="exerciseImage02" />
                </td>
                <td id="inputAdd">
                    <button id="btn-@item.IdExercise" class="button" style="background-color: rgb(13, 
                     194, 255);" onclick="AddExercise(@item.IdExercise)">Ajouter</button>
                </td>
            </tr>
            }
    </table>


    <script>
        function AddExercise(id_exercise) {

            var button = document.getElementById("btn-" + id_exercise);

            if (button.style.backgroundColor == "rgb(13, 194, 255)") {

                button.style.backgroundColor = "#24bd26";

            }
            else {
                button.style.backgroundColor = "rgb(13, 194, 255)";
                localStorage.removeItem("exercise-" + id_exercise);
            }

        }
    </script>

练习名
重复次数
系列数
形象
@foreach（模型中的var项目）
{
@DisplayFor（modelItem=>item.ExerciseName）
阿约特
}
函数加法器练习（id_练习）{
var按钮=document.getElementById（“btn-”+id\u练习）；
if（button.style.backgroundColor==“rgb（13194255）”）{
button.style.backgroundColor=“#24bd26”；
}
否则{
button.style.backgroundColor=“rgb（13194255）”；
localStorage.removietem（“练习-”+id\u练习）；
}
}

您特别需要哪些数据？真的不清楚这里有什么具体问题。注意：您可能需要了解如何使用可由元素读取的

data-

属性。dataseti希望从表行获取所有td。所以我需要像var exercise=document.getElementById（“tablerow”）.cells这样的东西；最终能够使用localstorage.setitem（“名称”，练习）；单击按钮a并向上移动到

最近（'tr'）

，不需要id。或者使用data-attribute将行id放在按钮上。出于某种原因，按钮没有最接近的函数，并且由于我有69个具有不同id的按钮，因此我无法在没有id参数的情况下编写addEventListener。每个元素都有一个最近的（）方法