Question

我有一个脚本可以从mysql数据库中获取结果，并以整齐的表格格式显示所有结果的复选框。我想这样做，点击行上的任意位置来触发复选框并突出显示整行。一次可选择多行。

我已经尝试过针对onlclick和getElementById功能的JS方法，并在CSS中使用：checked。到目前为止还没有进展。

<table id="tab-1">
    <thead>
        <tr>
            <th scope="col">Select</th>
            <th scope="col">ID</th>
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
            <th scope="col">D</th>
            <th scope="col">E</th>
            <th scope="col">E</th>
            <th scope="col">F</th>
            <th scope="col">G</th>
            <th scope="col">H</th>
            <th scope="col">I</th>
            <th scope="col">J</th>
            <th scope="col">k</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="checkbox[]" id="checkbox[]" value="<?php echo $row['ID']; ?>"  /></td>
            <td><?php echo $row['ID']; ?></td>
            <td><?php echo $row['A']; ?></td>
            <td><?php echo $row['B']; ?></td>
            <td><?php echo $row['D']; ?></td>
            <td><?php echo $row['E']; ?></td>
            <td><?php echo $row['F']; ?></td>
            <td><?php echo $row['G']; ?></td>
            <td><?php echo $row['H']; ?></td>
            <td><?php echo $row['I']; ?></td>
            <td><?php echo $row['J']; ?></td>
            <td><?php echo $row['K']; ?></td>
            <td><?php echo $row['L']; ?></td>
            <td><?php echo $row['M']; ?></td>
        </tr>
    </tbody>
<table>

Answer 1

如果你可以使用jquery，你可以尝试

$(document).on('click','tr',function(){
 $(this).find('input[type="checkbox"]').prop('checked',true);
 $(this).css('background','yellow'); // or anything else for highlighting purpose
});

根据评论更新JSFiddle

Answer 2

例如使用jQuery：

$('#table').on('click', 'tr', function() {
    $(this).find('td:first :checkbox').trigger('click');
})
.on('click', ':checkbox', function(e) {
    e.stopPropagation();
    $(this).closest('tr').toggleClass('selected', this.checked);
});

演示：http://jsfiddle.net/3E4Lk/2/

Answer 3

您可以使用classList.toggle切换行上的活动类，并使用!ele.checked切换复选框的检查。

CSS

tr.active {
   background:rgba(0,255,0,0.35);
}

的Javascript

function rowClicked(){
   var inputs = this.getElementsByTagName("input");
   var checkboxes = [].filter.call(inputs,function(input){
      return input.type == "checkbox" && input.name == "checkbox[]";
   });
   this.classList.toggle("active");       
   if(checkboxes[0]) checkboxes[0].checked = this.classList.contains("active")

}
window.addEventListener("load",function(){
   var table = document.getElementById("tab-1");
   var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
   for(var i=0; i<rows.length; i++){
      rows[i].addEventListener("click",rowClicked);
   }
});

JSFiddle

单击行上的任意位置以选中复选框并突出显示它？

3 个答案:

演示：http://jsfiddle.net/3E4Lk/2/