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

Question

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>

Do you mean the highlight effect where it highlights and then goes back to normal? Or a background color? — AyB
– AyB, Commented Jan 21, 2014 at 5:00
it will change the background color if the check box is ticked. just like in the yahoo mail. — psab_72
– psab_72, Commented Jan 21, 2014 at 5:04

j08691 · Accepted Answer · 2014-01-21 05:00:58Z

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

monners · Accepted Answer · 2014-01-21 05:05:46Z

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

Agha Umair Ahmed · Accepted Answer · 2014-01-21 05:04:25Z

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

Krish R · Accepted Answer · 2014-01-21 05:04:29Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related