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

Posted 2023-05-08

【中文标题】动态创建的 html 表格行上的单行选择

【英文标题】：Single Row Selection on Dynamically created html table row

【发布时间】：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.selectedRowbackground-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 成功回调中声明您的“点击”处理程序。这样您的新行也附加了点击处理程序。

感谢您的信息，它正在工作

【参考方案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 表行单击