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

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>

Answer 1

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

Answer 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;
}
Here's a Fiddle

Answer 3

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

Answer 4

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>