如何勾選複選框（點擊按鈕時）如何使表格行突出顯示？

Question

我正在創建一個包含一個表的Jquery Mobile頁面。該表將顯示用戶。表格行包含第一個單元格中的複選框，後面跟着用戶信息。在表格底部有一個按鈕（編輯）。點擊這個按鈕時，我想要勾選其複選框的行被突出顯示，並且行中的單元格可以編輯。

我想強調/編輯按鈕的點擊使編輯的行，當

• 一）行復選框被選中。

該表已使用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並偵聽的事件，如果觸發該點擊事件的元素在on選擇匹配不言而喻，雖然與事件。

toggleClass只是在檢查到被點擊的輸入時添加了「高亮」類。

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

如果你想使單元格可編輯，您需要將它們包裝在輸入中。禁止輸入和刪除邊框中的「顯示模式」的時候......

$('#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/