时间戳

首页 > 解决方案 > 动态创建的 html 表格行上的单行选择

jquery - 动态创建的 html 表格行上的单行选择

问题描述

我创建了一个动态表。此 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');
   })

标签： jqueryhtmlcssasp.netajax

解决方案

在追加新行之后，您应该在 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);
}
});

推荐阅读