Question

我需要使用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>

Answer 1

你可以用这个jQuery和一个CSS类来完成它：

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

<强> jsFiddle example

Answer 2

你必须使用jquery来突出它在jquery-10.1.2上的行

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

Answer 3

试试这个，

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

Answer 4

// 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

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

4 个答案: