Hightlight a row in a table when....

Jay · Apr 25, 2004

Hi !

I am writing a page that displays a list of records in a table. Each
row for each record. Each row has a checkbox associated with it. Does
anybody know how to highlight a row when I click on a checkbox in that
row and unhightlight it when I re-click that checkbox? (like in
"hotmail" and "yahoo" e-mail when u select a message to delete).

Any help would be appreciated !

Thank you in advance !

Jay

Jay · Apr 26, 2004

Thank a lot Mike, It worked !!!!! Jayyyyyy

Jay

Martin Honnen · Apr 26, 2004

Jay said:
I am writing a page that displays a list of records in a table. Each
row for each record. Each row has a checkbox associated with it. Does
anybody know how to highlight a row when I click on a checkbox in that
row and unhightlight it when I re-click that checkbox? (like in
"hotmail" and "yahoo" e-mail when u select a message to delete).

Here is an example that traverses the document tree for a <tr> ancestor
element and then changes its inline background-color style as needed

<html lang="en">
<head>
<title>changing the background-color of a table row</title>
<script type="text/javascript">
var backgroundColor = 'lightblue';
function setRowBackground (childCheckbox) {
var row = childCheckbox.parentNode;
while (row && row.tagName.toLowerCase() != 'tr') {
row = row.parentNode;
}
if (row && row.style) {
if (childCheckbox.checked) {
row.style.backgroundColor = backgroundColor;
}
else {
row.style.backgroundColor = '';
}
}
}
</script>
<style type="text/css">
tr {
background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<label>
delete
<input type="checkbox" name="message" value="1"
onclick="setRowBackground(this);">
</label>
<td>
All for Kibology
</td>
</tr>

<tr>
<td>
<label>
delete
<input type="checkbox" name="message" value="2"
onclick="setRowBackground(this);">
</label>
<td>
Kibology for all
</td>
</tr>
</tbody>
</table>
</body>
</html>

Duplicate ID issue when trying to copy table row	1	Jul 30, 2022
Why is updating in DELETE trigger delayed when fetching user?	1	Mar 25, 2023
Can't execute php to delete multiple rows in database	3	May 14, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
How can I create a table using the input element?	1	Mar 25, 2022
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
How to add dropdown selected data to table using jquery	2	Jul 2, 2022

Hightlight a row in a table when....

Jay

Jay

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads