javascript - 如果选中复选框(单击按钮)，如何使表格行突出显示？

Question

我正在创建一个包含表格的 Jquery Mobile 页面。该表将显示用户。表格行的第一个单元格中包含复选框，后面是用户信息。表格底部有一个按钮(编辑)。单击此按钮时，我希望选中复选框的行突出显示，并且该行中的单元格可编辑。

我想在单击编辑按钮时突出显示/使行可编辑

• a) 行复选框已勾选。

该表是使用 JavaScript 循环创建的(函数在页面加载时加载)。

var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
                        "<thead>" +
                           "<tr class='ui-bar-b schedule_row'>" +
                             "<th></th>" +
                             "<th>UserID</th>" +
                             "<th>First Name</th>" +
                             "<th>Surname</th>" +
                             "<th>Home Location</th>" +
                           "</tr>" +
                         "</thead>" +
                         "<tbody>";



for (s = 0; s < 15; s++) {
    //contenteditable='true'
    UsersHTML += "<tr class='schedule_row'>" +
         "<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
         "<td> " + + "</td>" +
          "<td>" + + "</td>" +
          "<td>" + + "</td>" +
          "<td>" + + "</td>" +
        "<td>" + + "</td>" +
         "<td align='right'";


    UsersHTML += "</td></tr>";
}

UsersHTML += "</tbody></table>";

$("#usersContent").html(UsersHTML);

我使用了 div 在页面上显示表格:

<div id="usersContent">
        </div>

任何帮助都会很棒!

Answer 1

您可以使用事件委托(delegate)。

$('#userContent').on('click', '.user_check_cell input[type=checkbox]', function () {
  var $input = $(this);
  $input.closest('tr').toggleClass('highlighted', $input.prop('checked'));
});

这会将事件监听器添加到 #userContent 并监听该事件，如果触发该单击事件的元素与 on 中的选择器相匹配，则它会执行事件。

当检查单击的输入时，toggleClass 只是添加“突出显示”类。