如果勾选复选框，我如何突出显示整行？答案

【问题标题】：How can i highlight the entire row if the checkbox is ticked?如果勾选复选框，我如何突出显示整行？
【发布时间】：2014-01-21 04:56:29
【问题描述】：

我需要使用 jquery 或 php 突出显示整行。有什么办法吗？或者请给我建议？

这是我正在处理的代码：

<table id ="gdRows" class="table table-bordered">
    <tr class="info">
        <td><input type='checkbox' id="selectall" onclick = "selectAll(this)"></td>
        <td><strong>Username</strong></td>
        <td><strong>Password</strong></td>
    </tr>   
    <?php

    for($i=0; $row = $qry->fetch(); $i++){
           $username = $row['username'];
           $password = $row['password'];           
    ?>
        <tr class="success">
  <td><input type="checkbox" name="chkDelete" ></td>
        <td><?php echo $username; ?></td>
        <td><?php echo $password; ?></td>
        </tr>
    <?php
    }
    ?>
   </table>

【问题讨论】：

你的意思是高亮效果，它高亮然后恢复正常？还是背景色？
您好，感谢您的快速回复。但它不起作用。
如果勾选复选框，它将改变背景颜色。就像在雅虎邮件中一样。

标签： php jquery checkbox

【解决方案1】：

你可以用这个 jQuery 和一个 CSS 类来做到这一点：

$('input[name="chkDelete"]').click(function () {
    $(this).closest('tr').removeClass('foo');
    if ($(this).is(':checked')) $(this).closest('tr').addClass('foo');
})

jsFiddle example

【讨论】：

【解决方案2】：

// jQuery
$('tr').find('input').on('click', function() {
    if ($(this).prop('checked') === true) {
       $(this).closest('tr').addClass('highlighted'); 
    } else {
       $(this).closest('tr').removeClass('highlighted'); 
    }
});

// CSS
.highlighted td {
    background: yellow;
}

这是Fiddle

【讨论】：

【解决方案3】：

您必须使用 jquery 突出显示它在 jquery-10.1.2 上的行

$(function () {
  $('#selectall').on('click',function(){
     $('yourdivwhichyouwanttohighilit').css('background-color','red');
  })
});

【讨论】：

【解决方案4】：

试试这个，

    <script src="jquery.js"></script>
    <script type="text/javascript">
        $(function(){
           $(".Row").click(function(){          
               if($(this).is(":checked")){         
                    $(this).closest('tr').css({backgroundColor: 'red'});
               }else{
                   $(this).closest('tr').css({backgroundColor: ''});
               }
           });

        });
    </script>

HTML：

 <tr class="success">
   <td><input type="checkbox" name="chkDelete" class="Row"></td>
    <td><?php echo $username; ?></td>
    <td><?php echo $password; ?></td>
</tr>

【讨论】：