javascript HTML 按钮单击更改行的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18518812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML button click change the background color of the row
提问by user2701646
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:
我有一个 HTML 表格，每一行都有一个按钮。这里的目标是当一个按钮被点击时，整行都会改变背景颜色。代码是：
<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!
你能帮我解决这个问题吗？谢谢！
回答by Sergio
You should use classinstead and for good practise remove the inline function calls inside your html.
您应该使用class代替，并且为了好的做法，请删除 html 中的内联函数调用。
Use this:
用这个：
HTML
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
jQuery
var all_tr = $('tr');
$('td input[type="button"]').on('click', function () {
all_tr.removeClass('selected');
$(this).closest('tr').addClass('selected');
});
Demo here
演示在这里
(updated)
（更新）
回答by Paul Roub
jQuery's closestmethod is perfect for this, since you included jQueryin your tags:
jQuery 的closest方法非常适合此，因为您包含jQuery在您的标签中：
function myFunction(el) {
//change the background color of the row
$(el).closest('tr').css('background-color', 'red');
}
in non-jQuery fashion, you can:
以非 jQuery 方式，您可以：
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';
}
回答by wiliammbr
you can use these solution with jQuery.
您可以将这些解决方案与 jQuery 一起使用。
<script type='text/javascript'>
$('table input').bind('click', function (e) {
$(this).parent().parent().addClass('redBackground');
});
</script>
Create CSS class, I named it 'redBackground'.
创建 CSS 类，我将其命名为“redBackground”。
<style type='text/css'>
.redBackground {
background: #fff;
}
</style>
Regards.
问候。
回答by crowebird
Here is a way you could do it: http://jsfiddle.net/69sU7/
这是你可以做到的一种方法：http: //jsfiddle.net/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 highlightto that tr.
当按钮被点击时，我们使用 jQuery 捕获 btn 本身，然后抓取其父级 ( td)，并抓取其父级 ( tr)。然后我们将类添加highlight到那个tr.
The .highlightclass adds to all the td's below it, a background of yellow.
将.highlight类添加到所有td的下方，黄色的背景。
回答by Robert
Use direct property backgroundColor
使用直接属性 backgroundColor
e.parentNode.parentNode.style.backgroundColor = '#ff0';
To reset other rows in the table do:
要重置表中的其他行，请执行以下操作：
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';
}
回答by Logan Murphy
Use this http://jsfiddle.net/4P3Jb/
使用这个http://jsfiddle.net/4P3Jb/
e.parentNode.parentNode.style.background = "red";
