<tr>改變顏色當元素裏面焦點

我想改變tr元素的顏色，當用戶選擇一個文本框在裏面。焦點僞類不適用於它。 ~~這可以在沒有JavaScript的情況下實現嗎？~~<tr>改變顏色當元素裏面焦點

HTML：

<table> 
<tr> 
    <td>Name</td><td><input type="text" name="name"></td> 
</tr> 
</table>

CSS：

tr:focus 
{ 
    background:yellow; 
}

UPDATE1：
貌似沒有CSS唯一方法。使用JavaScript來做這件事最簡單的方法是什麼？

來源

2012-04-15 Aamir Rizwan

這將是很好，如果你使用這個輸入：焦點這將工作 – Jack 2012-04-15 08:11:58

是的，焦點給輸入很好的效果，但我不想突出整行。 – 2012-04-15 08:32:26

不。CSS3中沒有主題選擇器，但在CSS4中會有一個。

EDIT：

甲純JavaScript解決方案可以是

var i; 
var inputs = document.querySelectorAll("tr > td > input"); 
for(i = 0; i < inputs.length; ++i){ 
    inputs[i].addEventListener('focus',function(e){ 
     this.parentNode.parentNode.className += ' highlight';   
    }); 
    inputs[i].addEventListener('blur',function(e){ 
     this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' '); 
    }); 
}

然而，這將不是在IE ≤ 7工作，因爲versons 8之前不知道document.querySelectorAll（demonstration）。如果你願意，你可以使用jQuery一個無憂無慮的跨瀏覽器解決方案，下面的代碼（demonstration）：

$("tr > td > input").focus(function(e){ 
    $(this).parent().parent().addClass('highlight'); 
}).blur(function(e){ 
    $(this).parent().parent().removeClass('highlight'); 
});

不要忘了一類tr.highlight添加到您的CSS。請記住，jQuery將下降支持舊的瀏覽器在將來的版本（見Browser Support），所以你必須使用jQuery 1.x中的IE 8 ≤

來源

2012-04-15 08:06:39 Zeta

謝謝。很棒。 – 2012-04-15 09:27:58

不，你不能沒有JavaScript。

來源

2012-04-15 08:06:29 ezakto

剛想說：http://jsfiddle.net/qHmGe/

來源

2012-04-15 09:10:33

在技術上可以通過在其上使用tabindex屬性在一個足夠新的瀏覽器上創建一個tr元素，例如<tr tabindex="1">。

但是，聚焦的方法是依賴於瀏覽器的，可聚焦的表格行可能成爲可用性的噩夢。例如，無論是在IE還是在Firefox上，該行都集中在何時適當使用TAB鍵，但重點行不接受輸入。該用法需要再次點擊TAB才能進入輸入字段。在Firefox上，但不是在IE瀏覽器上，也可以通過單擊來關注該行，但不是通過單擊輸入字段（因爲這將關注該字段）。如果您使用label標記，建議您使用可用性和可訪問性，例如

<table> 
<tr tabindex="1"> 
    <td><label for="name">Name</label></td> 
    <td><input type="text" name="name" id="name"></td> 
</tr> 
</table>

...然後單擊標籤上的重點在輸入域（的理由使用label標記之一！），而不是排元素。

來源

2012-04-15 11:01:59

<tr>改變顏色當元素裏面焦點

回答

相關問題