I have an HTML table that has a button on every row. The objective here is when a button is clicked, the whole row will got the background color changed. The code is:
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="button" value="press" onclick="myFunction(this)" />
</td>
</tr>
<tr>
<td>Value3</td>
<td>Value4</td>
<td>
<input type="button" value="press" onclick="myFunction(this)" />
</td>
</tr>
</table>
<script type="text/javascript">
function myFunction(e) {
//change the background color of the row
}
</script>
Can you help me with this? Thanks!
I have an HTML table that has a button on every row. The objective here is when a button is clicked, the whole row will got the background color changed. The code is:
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="button" value="press" onclick="myFunction(this)" />
</td>
</tr>
<tr>
<td>Value3</td>
<td>Value4</td>
<td>
<input type="button" value="press" onclick="myFunction(this)" />
</td>
</tr>
</table>
<script type="text/javascript">
function myFunction(e) {
//change the background color of the row
}
</script>
Can you help me with this? Thanks!
Share Improve this question edited Aug 29, 2013 at 18:51 KyleMit♦ 30.1k72 gold badges506 silver badges698 bronze badges asked Aug 29, 2013 at 18:47 user2701646user2701646 1394 gold badges4 silver badges20 bronze badges6 Answers
Reset to default 5You should use class instead and for good practise remove the inline function calls inside your html.
Use this:
HTML
<table>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>
<input type="button" value="press" />
</td>
</tr>
<tr>
<td>Value3</td>
<td>Value4</td>
<td>
<input type="button" value="press" />
</td>
</tr>
</table>
jQuery
var all_tr = $('tr');
$('td input[type="button"]').on('click', function () {
all_tr.removeClass('selected');
$(this).closest('tr').addClass('selected');
});
Demo here
(updated)
jQuery's closest method is perfect for this, since you included jQuery in your tags:
function myFunction(el) {
//change the background color of the row
$(el).closest('tr').css('background-color', 'red');
}
in non-jQuery fashion, you can:
function myFunction(el) {
//change the background color of the row
while (el && (el.tagName.toLowerCase() != 'tr'))
el = el.parentNode;
if (el)
el.style.backgroundColor = 'red';
}
you can use these solution with jQuery.
<script type='text/javascript'>
$('table input').bind('click', function (e) {
$(this).parent().parent().addClass('redBackground');
});
</script>
Create CSS class, I named it 'redBackground'.
<style type='text/css'>
.redBackground {
background: #fff;
}
</style>
Regards.
Here is a way you could do it: http://jsfiddle/69sU7/
myFunction = function(btn) {
$(btn).parent().parent().addClass('highlight');
}
When the button is clicked, using jQuery, we capture the btn itself, then grab its parent (td), and grab its parent (tr). We then add the class highlight to that tr.
The .highlight class adds to all the td's below it, a background of yellow.
Use direct property backgroundColor
e.parentNode.parentNode.style.backgroundColor = '#ff0';
http://jsfiddle/cguLU/1/
To reset other rows in the table do:
http://jsfiddle/cguLU/2/
function myFunction(e) {
var tr = e.parentNode.parentNode;
var table = e.parentNode.parentNode.parentNode;
//set current backgroundColor
var len = table.childNodes.length;
for (var i = 0; i < len; i++) {
if (table.childNodes[i].nodeType == 1) {
table.childNodes[i].style.backgroundColor = 'transparent';
}
}
tr.style.backgroundColor = '#ff0';
}
Use this http://jsfiddle/4P3Jb/
e.parentNode.parentNode.style.background = "red";