Javascript 如果选中复选框（单击按钮），如何使表格行高亮显示？

我正在创建一个Jquery移动页面，其中包含一个表。该表将显示用户。表行包括第一个单元格中的复选框，后面是用户信息。在表格的底部有一个按钮（编辑）。单击此按钮时，我希望选中复选框的行高亮显示，且行中的单元格可编辑

我想在以下情况下单击“编辑”按钮高亮显示/生成可编辑行：

• a） 选中“行”复选框

该表是使用JavaScript循环创建的（函数在页面加载时加载）

var UsersHTML=“”+
"" +
"" +
"" +
“用户ID”+
“名字”+
“姓”+
“主位置”+
"" +
"" +
"";
对于（s=0；s<15；s++）{
//content='true'
UsersHTML+=“”+
"" +"" + "" +
" " + + "" +
"" + + "" +
"" + + "" +
"" + + "" +
"" + + "" +
“您可以使用事件委派

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

这会将事件侦听器添加到
#userContent
中，并侦听该事件上的事件，如果触发该单击事件的元素与
上的
中的选择器匹配，则会与该事件一起执行

当选中单击的输入时，
toggleClass
仅添加“突出显示”的类。
尝试以下操作：

html

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

首先，我鼓励您研究某种框架，使之更容易。jsRender、Knockout.js和Angular.js都会使其更干净、更容易

不走任何一条路，我会做这样的事

添加几个类来帮助我们

.display input {
    border: none;
    color: #000;
}

.hightlight {
    background-color: #ffffbb;
}

如果要使单元格可编辑，需要将其包装在输入中。在“显示模式”下禁用输入并删除边框

我还修改了您的代码，添加了一个用户数组，并将用户数据添加到表中

为了(

s=0；s<15；s++）{
//content='true'
UsersHTML+=“”+
"" +"" + "" +
“+s+”+
"" +
“”+用户。lastName+“”+
“+个用户。位置+”；
UsersHTML+=“”；
}

在这里工作的小提琴…
Nice，clean solution，+1。我唯一的修改是使用$（this）.is（“：checked”）作为您在toggleClass上的开关参数，因为jQuery可以混淆任何浏览器特性。我将其切换为
.prop（'checked'）
但我认为现在只要
这个。选中就可以了。谢谢，这是一种享受：），但我需要这样做，以便在单击编辑按钮时突出显示行。因此，用户将单击/勾选他们想要编辑的行上的复选框，然后当他们完成选择后，他们将单击编辑按钮-这将然后高亮显示所选行。另外，我如何在高亮显示行的同时使行可编辑？感谢您的帮助/时间，非常感谢！：）因此单击时会有一个按钮，然后单击hightlight TR并选中复选框？非常感谢更新的代码！如何使高亮显示的行也可编辑？当单击“编辑”按钮，突出显示的行将变为可编辑行，即突出显示的行中的内容在文本框中变为可编辑行？您能否对此提出另一个问题？因为此问题的标题是“如果选中复选框（单击按钮），如何突出显示表格行”？"感谢您提供的解决方案：）。这非常有效，但是我不确定如何在单击按钮时实现这一点-即单击“编辑”按钮时突出显示行。因此，用户将单击/勾选他们想要编辑的行上的复选框，然后在完成选择后单击“编辑”按钮-这将是高亮显示ht/在所选行上显示文本框。感谢您的时间！哦，是的。完全可行。检查这个…这更接近您要查找的内容。
<div id="usersContent">
        </div>

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");
}

.highlight{
    background: green;
}

.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>";
}