mio HTML: <tr><td>Text</td><td><input type="text" value=""></td></tr>Come cambiare il colore di sfondo della riga della tabella (tr) quando l'input è ": focus"?
mio CSS: input:focus tr{ background-color:#fff;}
voglio evidenziare la riga in bianco quando sto scrivendo il testo nel campo di input. So che "tr" è prima di "input", ma è possibile farlo in qualche modo?
Grazie mille
No, purtroppo. Vedi: Complex CSS selector for parent of active child
Ecco come si potesse fare, però: http://jsfiddle.net/minitech/udzcp/
Purtroppo, non c'è modo per lo stile l'elemento padre con i CSS, in modo da dovrete usare javascript.
Questo codice jQuery dovrebbe farlo:
$('input').focus(function() {
$('tr').css("background-color", "#c00");
});
Demo here
Vedere: http://jsfiddle.net/9mR95/ Questo codice evidenzierà tutte le righe e non solo il genitore dell'elemento di input quando viene selezionato e non annullerà la riga dopo la sfocatura. – Ryan
Questo è un bene per quando si sta generando un molte righe simili (looping di grandi set di dati, ecc.): Script:
function rowSet(data_id){
document.getElementById('row_' + data_id).style.backgroundColor = 'blue';
}
function rowReset(data_id){
document.getElementById('row_' + data_id).style.backgroundColor = '';
}
Corpo:
<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>
Si potrebbe anche usare currentRow, o quello che preferite.
Utilizzando JQuery, è molto possibile. Osservare:
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 perché è alternativo e ha funzionato per me. –
La ringrazio molto per questo link! Mi hai appena salvato un sacco di tempo – Joel
Oh e, a proposito, ho modificato il mio post per includere un esempio di come potresti farlo con JavaScript. – Ryan