如何在选中复选框时突出显示表行(单击按钮时)

How to make a table row highlight if the checkbox is checked (on button click)?

本文关键字：单击 按钮 显示 复选框      更新时间：2023-09-26

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

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

  • 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>

任何帮助将是伟大的!

您可以使用事件委托。

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

这将事件侦听器添加到#userContent并侦听其上的事件，如果触发该单击事件的元素与on中的选择器匹配，则该事件将继续进行。

toggleClass只是添加类"高亮"，当被点击的输入被检查。

试试这个:

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

js: 

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' id='testTr_"+s+"'>" +
         "<td class='user_check_cell'>" +"<input type='checkbox' id='chk_"+s+"' specId='"+s+"' class='hightlight' onclick='changeHight(this);'>" + "</td>" +
         "<td> " + + "</td>" +
          "<td>" + + "</td>" +
          "<td>" + + "</td>" +
          "<td>" + + "</td>" +
        "<td>" + + "</td>" +
         "<td align='right'";

    UsersHTML += "</td></tr>";
}
UsersHTML += "</tbody></table>";
$("#usersContent").html(UsersHTML);

window.changeHight = function(obj){
    var specTr = $(obj).attr("specId");
    if($(obj).prop("checked"))
      $("#testTr_"+specTr).addClass("highlight");
    else
      $("#testTr_"+specTr).removeClass("highlight");
}
css:

.highlight{
    background: green;
}

小提琴

首先，我建议您研究一些框架，以使这更容易。jsRender、Knockout.js和Angular.js都会让这个过程更清晰、更简单。

如果不走这些路，我会做这样的事情…

添加一些类来帮助我们....

.display input {
    border: none;
    color: #000;
}
.hightlight {
    background-color: #ffffbb;
}

如果要使单元格可编辑，则需要将它们包装在输入中。在"显示模式"下禁用输入并移除边框…

$('#userTable').on('click', 'input[type="checkbox"]', function() {
    var row = $(this).closest('tr');
    row.removeClass('display');
    row.addClass('hightlight');
    row.find('input').removeAttr('disabled');
})

我还更改了您的代码一点，以添加用户数组并将用户数据添加到表中…

(

s = 0; s < 15; s++) {
    //contenteditable='true'
    UsersHTML += "<tr class='schedule_row display'>" +
         "<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
         "<td> " + s + "</td>" +
          "<td><input disabled='disabled' value='" + users[s].firstName + "'></input></td>" +
          "<td>" + users[s].lastName + "</td>" +
          "<td>" + users[s].location + "</td>";

    UsersHTML += "</tr>";
}

在这里工作…http://jsfiddle.net/gRFD8/1/

相关文章：