Benim HTML: <tr><td>Text</td><td><input type="text" value=""></td></tr>Girdi ": focus" olduğunda tablo satırının (tr) arka plan rengi nasıl değiştirilir?
Benim CSS: input:focus tr{ background-color:#fff;}
Ben girdi alanındaki metni yazıyorum zaman beyaz satır vurgulamak istiyoruz. "Tr" in "giriş" öncesi olduğunu biliyorum, ancak bu herhangi bir şekilde yapılabilir mi?
Çok teşekkürler Ne yazık ki
Hayır, ne yazık ki. Bkz: Complex CSS selector for parent of active child İşte
bunu yapabileceğini nasıl olsa: http://jsfiddle.net/minitech/udzcp/
, CSS ile ana elemanı stil yolu yok, bu yüzden javascript kullanmak gerekecek.
Bu, bir ürettiğini zaman için iyidir Benzer satırların çokluğu (büyük veri kümeleriyle döngü, vb.): Komut Dosyası:
function rowSet(data_id){
document.getElementById('row_' + data_id).style.backgroundColor = 'blue';
}
function rowReset(data_id){
document.getElementById('row_' + data_id).style.backgroundColor = '';
}
Gövde:
<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>
Ayrıca currentRow kullanabilirsiniz, ya da ne tercih ederim.
JQuery'yi kullanarak, bu çok mümkündür. Gözlemleyin:
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
.highlightedRow { background-color: orange; }
jQuery
$('input').focus(function() {
$(this).parent().parent().addClass('highlightedRow');
});
$('input').blur(function() {
$(this).parent().parent().removeClass('highlightedRow');
});
+1 çünkü bu ve alternatif ve benim için çalıştı. –
bu bağlantı için çok teşekkür ederiz! Beni sadece – Joel
Oh zamanından kurtardınız ve bu arada, yazıyı JavaScript ile nasıl yapabileceğinize dair bir örnek eklemek üzere düzenledim. – Ryan