如何让JavaScript中的ID与表格视图ID匹配？

看起来你遇到了闭包导致变量值不匹配的问题，我来帮你捋捋怎么解决～

问题的核心在于：你循环给按钮绑定点击事件时，myRow是一个共享变量，当所有按钮的点击事件触发时，myRow已经变成循环结束后的最终值了，自然没法对应到每个按钮对应的行号。

给你两种简单可行的解决办法：

方法一：绑定点击事件时传递当前行号 #

修改按钮绑定的代码，把当前循环的行号单独保存并传给AddStudentRecords函数，避免闭包带来的变量污染：

$(document).ready(function () {
    var myRow = 0;
    $('.btnAddRecords').each(function () {
        myRow = myRow + 1;
        // 保存当前循环的行号，避免闭包问题
        var currentRow = myRow;
        $(this).attr("id", "btnAddRecords" + currentRow).click(function () {
            AddStudentRecords(currentRow);
        })
    });
    $("#btnSaveData").click(function () {
        SaveStudentRecords();
    });
});

function AddStudentRecords(rowNum) {
    // 直接用传入的rowNum拼接输入框ID
    var StudentRecords = "<tr><td>" + $("#txtSubject" + rowNum).val() + "</td><td>" +
               $("#txtMarks" + rowNum).val() + "</td></tr>";
    // 这里可以把生成的行添加到目标表格，比如：
    // $("#yourTable tbody").append(StudentRecords);
}

方法二：从按钮ID中提取行号 #

如果不想额外传递参数，也可以在点击按钮时，直接从按钮的ID里解析出对应的行号：

$(document).ready(function () {
    var myRow = 0;
    $('.btnAddRecords').each(function () {
        myRow = myRow + 1;
        $(this).attr("id", "btnAddRecords" + myRow).click(function () {
            // 从按钮ID中拆分出数字部分
            var rowNum = $(this).attr("id").replace("btnAddRecords", "");
            AddStudentRecords(rowNum);
        })
    });
    $("#btnSaveData").click(function () {
        SaveStudentRecords();
    });
});

function AddStudentRecords(rowNum) {
    var StudentRecords = "<tr><td>" + $("#txtSubject" + rowNum).val() + "</td><td>" +
               $("#txtMarks" + rowNum).val() + "</td></tr>";
    // 后续添加到表格的逻辑
}

最后提醒一句：要确保你的txtSubject和txtMarks输入框的ID确实是txtSubject1、txtMarks1这种和按钮行号对应的格式，不然还是会匹配不到哦～

备注：内容来源于stack exchange，提问作者Donnie