CSS 输入为“:focus”时如何更改表格行 (tr) 的背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5986554/
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
How to change background color of table row (tr) when input is ":focus"?
提问by Joel
My HTML:
<tr><td>Text</td><td><input type="text" value=""></td></tr>
我的HTML：
<tr><td>Text</td><td><input type="text" value=""></td></tr>
My CSS:
input:focus tr{ background-color:#fff;}
我的CSS：
input:focus tr{ background-color:#fff;}
I want to highlight the row in white when I'm writing text in the input field. I know "tr" is before "input", but is this possible to do in any way?
当我在输入字段中写入文本时，我想用白色突出显示该行。我知道“tr”在“输入”之前，但这有可能以任何方式进行吗？
Thanks a bunch
谢谢一堆
采纳答案by Ry-
No, sadly. See: Complex CSS selector for parent of active child
不，很遗憾。请参阅：活动子项的父项的复杂 CSS 选择器
Here's how you could do it, though: http://jsfiddle.net/minitech/udzcp/
不过，您可以这样做：http: //jsfiddle.net/minitech/udzcp/
回答by Joshua Carroll
Using JQuery, it is very possible. Observe:
使用JQuery，很有可能。观察：
HTML
HTML
<table border="1" cellpadding="20">
<tr>
<td>Text</td>
<td height="50" width="100" id="somename"><input type="text" value="" id="mirza"></td>
</tr>
<tr><td> </td><td> </td></tr>
<tr><td>a </td><td>1 </td></tr>
<tr><td>a </td><td>1 </td></tr>
<tr><td>a </td><td>1 </td></tr>
<tr><td>a </td><td>1 </td></tr>
<tr><td>a </td><td>1 </td></tr>
</table>
CSS
CSS
.highlightedRow { background-color: orange; }
Jquery
查询
$('input').focus(function() {
$(this).parent().parent().addClass('highlightedRow');
});
$('input').blur(function() {
$(this).parent().parent().removeClass('highlightedRow');
});
回答by kodemonki
This is good for when you are generating a lot of similar rows (looping through large datasets, etc): Script:
当您生成大量类似的行（循环遍历大型数据集等）时，这很有用： 脚本：
function rowSet(data_id){
document.getElementById('row_' + data_id).style.backgroundColor = 'blue';
}
function rowReset(data_id){
document.getElementById('row_' + data_id).style.backgroundColor = '';
}
Body:
身体：
<body>
<form>
<table>
<tr id="row_#data_id#">
<td><input name="input1_#data_id#" onFocus="rowSet(#data_id#);" onBlur="rowReset(#data_id#);"></td>
<td><input name="input2_#data_id#" onFocus="rowSet(#data_id#);" onBlur="rowReset(#data_id#);"></td>
</tr>
</table>
</form>
</body>
You could also use currentRow, or whatever you prefer.
您也可以使用 currentRow 或任何您喜欢的。
回答by Emmett
Sadly, there's no way to style the parent element with CSS, so you'll have to use javascript.
遗憾的是，无法使用 CSS 设置父元素的样式，因此您必须使用 javascript。
