如何在輸入爲「：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）的背景顏色？

回答

相關問題