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

您可以使用事件委派。

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

这会将事件侦听器添加到#userContent并侦听其上的事件，如果触发该click事件的元素与on中的选择器匹配，则它会与事件一起发生。

toggleClass只是添加了类＆＃34;突出显示＆＃34;当检查单击的输入时。

Answer 2

试试这个：

<强> HTML

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

fiddle

Answer 3

首先，我建议您研究某种框架，以便更轻松。 jsRender，Knockout.js和Angular.js都会让这个变得更干净，更容易。

如果没有走下任何一条道路，我会做这样的事情......

添加几个课程来帮助我们......

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

.hightlight {
    background-color: #ffffbb;
}

如果要使单元格可编辑，则需要将它们包装在输入中。在＆＃34;显示模式＆＃34; ...

中禁用输入并删除边框

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

我还更改了一些代码以添加用户数组并将用户数据添加到表格中......

for（

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/

如果选中复选框（按钮点击），如何使表格突出显示？

3 个答案: