如何在输入为“：focus”时更改表格行（tr）的背景颜色？

我HTML： <tr><td>Text</td><td><input type="text" value=""></td></tr>如何在输入为“：focus”时更改表格行（tr）的背景颜色？

我CSS： input:focus tr{ background-color:#fff;}

我想强调在白色行，当我在输入框中输入文字。我知道“tr”在“输入”之前，但是这有可能以任何方式进行？

多谢

来源

2011-05-13 Joel

不，可悲。请参阅：Complex CSS selector for parent of active child

这里是你如何能做到这一点，虽然：http://jsfiddle.net/minitech/udzcp/

来源

2011-05-13 02:11:29 Ryan

非常感谢您对这个环节！你刚刚为我节省了很多时间 – Joel 2011-05-13 02:17:00

哦，顺便说一下，我编辑了我的帖子，包括一个如何使用JavaScript来做的例子。 – Ryan 2011-05-13 02:19:12

可悲的是，有没有办法风格CSS父元素，所以你必须使用JavaScript。

来源

2011-05-13 02:10:16 Emmett

-1

这个jQuery代码应该这样做：

$('input').focus(function() { 
    $('tr').css("background-color", "#c00"); 
});

演示here

来源

2011-05-13 02:20:53 raeq

请参阅：http://jsfiddle.net/9mR95/当代码被选中时，该代码将突出显示所有行，而不仅仅是输入元素的父代，并且不会在模糊后忽略该行。 – Ryan 2011-05-16 18:05:28

这是一件好事，当你正在生成的许多相似的行（循环通过大型数据集等）：脚本：

function rowSet(data_id){ 
    document.getElementById('row_' + data_id).style.backgroundColor = 'blue'; 
} 
function rowReset(data_id){ 
    document.getElementById('row_' + data_id).style.backgroundColor = ''; 
}

身体：

<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>

你也可以使用currentRow，或任何你喜欢的。

来源

2011-09-30 17:25:19 kodemonki

使用JQuery，这是非常可能的。注意：

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>&nbsp;</td><td>&nbsp;</td></tr> 
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr> 
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr> 
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr> 
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr> 
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr> 
</table>

CSS

.highlightedRow { background-color: orange; }

jQuery的

$('input').focus(function() { 
    $(this).parent().parent().addClass('highlightedRow'); 
}); 

$('input').blur(function() { 
    $(this).parent().parent().removeClass('highlightedRow'); 
});

来源

2011-10-04 18:44:39

+1因为它和替代方案，并为我工作。 – 2012-10-03 16:47:20

如何在输入为“：focus”时更改表格行（tr）的背景颜色？

回答

相关问题