动态创建的 html 表格行上的单行选择答案

【问题标题】：Single Row Selection on Dynamically created html table row动态创建的 html 表格行上的单行选择
【发布时间】：2020-03-01 09:45:20
【问题描述】：

我创建了一个动态表。此 html 表具有数据绑定并从数据库中获取所有数据。我有一个使用 jquery 的点击行选择功能，但我认为它只在静态表（硬编码）上执行。有人可以帮我在动态创建的 html 表格行上单击单行选择吗？（它应该是单行选择，这意味着当用户单击其他表格行时，应该取消选择最后选择的行。）

HTML

<table id="tblCases">
<thead > 
<tr>
<th>CASE KEY</th>
<th>DEPARTMENT CASE #</th>
<th>DEPARTMENT</th>
<th>CHARGE</th>
<th>LAB CASE #</th>
<th>INCIDENT REPORT DATE</th>
</tr>
</thead> 
<tbody></tbody>
</table>

CSS

#tblCases tr.selectedRow{background-color: #56bff0;}

AJAX

$.ajax({
    url: 'E****_L******_AjaxWS.asmx/GetRecentCases',
    dataType: "json",
    method: 'post',
    success: function (data) {
        var recentcasesTable = $('#tblCases tbody');
        recentcasesTable.empty();
        $(data).each(function (index, rcases) {
            recentcasesTable.append('<tr><td>' + rcases.CASE_KEY + '</td><td>'
                        + rcases.DEPARTMENT_CASE_NUMBER + '</td><td>' + rcases.DEPARTMENT_NAME + '</td><td>' + rcases.CHARGE
                        + '</td><td>' + rcases.LAB_CASE + '</td><td>' + rcases.OFFENSE_DATE + '</td></tr>');
        });
    },
    error: function (err) {
        alert(err);
    }
});

JQUERY（我的点击行选择，它只适用于静态表）

$('#tblCases tr').click(function () {
       $('#tblCases tr').removeClass('selectedRow');
       $(this).addClass('selectedRow');
   })

【问题讨论】：

您应该在添加新行之后在您的 ajax 成功回调中声明您的“点击”处理程序。这样您的新行也附加了点击处理程序。
感谢您的信息，它正在工作

标签： jquery html css asp.net ajax

【解决方案1】：

在追加新行之后，您应该在 ajax 成功回调中声明您的“点击”处理程序。这样您的新行也附加了单击处理程序。确保使用“off”删除以前的单击处理程序，以避免重复处理程序。

$.ajax({
url: 'E****_L******_AjaxWS.asmx/GetRecentCases',
dataType: "json",
method: 'post',
success: function (data) {
    var recentcasesTable = $('#tblCases tbody');
    recentcasesTable.empty();
    $(data).each(function (index, rcases) {
        recentcasesTable.append('<tr><td>' + rcases.CASE_KEY + '</td><td>'
                    + rcases.DEPARTMENT_CASE_NUMBER + '</td><td>' + rcases.DEPARTMENT_NAME + '</td><td>' + rcases.CHARGE
                    + '</td><td>' + rcases.LAB_CASE + '</td><td>' + rcases.OFFENSE_DATE + '</td></tr>');           
    });

   $('#tblCases tr').off("click").on("click", function () {
     $('#tblCases tr').removeClass('selectedRow');
     $(this).addClass('selectedRow');
   });

},
error: function (err) {
    alert(err);
}
});

【讨论】：

【解决方案2】：

在将新行追加到表中后，您应该重新绑定 jquery 表行单击

【讨论】：