CODEWITHSUNDEEP
phpjquerycheckbox
psab_72
psab_72

Reputation: 51

How can i highlight the entire row if the checkbox is ticked?

i need to highlight the entire row using jquery or php. is there any way to do this? or please suggest me the alternative?

Here is the code i'm working on:

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

Upvotes: 0

Views: 1578

Answers (4)

monners
monners

Reputation: 5302

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

Here's a Fiddle

Upvotes: 1

Krish R
Krish R

Reputation: 22711

Try this,

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

Upvotes: 0

Agha Umair Ahmed
Agha Umair Ahmed

Reputation: 1020

You have to use jquery to highlit the row it is on jquery-10.1.2

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

Upvotes: 0

j08691
j08691

Reputation: 207901

You could do it with this jQuery and a CSS class:

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

jsFiddle example

Upvotes: 3

Related Questions