html - 内部の要素に焦点が合っているときに色を変更します

Question

ユーザーがその中のテキストボックスを選択したときにtr要素の色を変更したい。フォーカス疑似クラスはそれで動作していません。これはJavaScriptなしで達成できますか？

html：

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

CSS：

tr:focus
{
    background:yellow;
}​

Update1：
​​CSSのみのメソッドはないようです。JavaScriptを使用してこれを行う最も簡単な方法は何ですか？

Answer 1

：focus-within..を使用するのはどうですか

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

CSS：

tr:focus-within {
  background:yellow;
  }​

フィドル

何が私を助けましたか。選ばれた答えは私にはうまくいきませんでした。

Answer 2

いいえ。CSS3にはサブジェクトセレクターはありませんが、CSS4にはサブジェクトセレクターがあります。

編集：

純粋な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では機能しません。8より前のバージョンではわからないためですdocument.querySelectorAll（デモ）。気楽なクロスブラウザソリューションが必要な場合は、 jQueryと次のコード（デモ）を使用できます。

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

tr.highlightCSSにクラスを追加することを忘れないでください。jQueryは将来のリリースで古いブラウザーのサポートを終了することに注意してください（ブラウザーのサポートを参照）。そのため、IE≤8の場合はjQuery1.xを使用する必要があります。

Answer 3

技術的には、要素の属性をtr使用することで、十分に新しいブラウザで要素をフォーカス可能にすることができます。tabindex<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…次に、ラベルをクリックすると、行要素ではなく、入力フィールド（マークアップを使用する理由の1つ！）に焦点が当てられます。

Answer 4

いいえ、JavaScriptなしではできません。

Answer 5

http://jsfiddle.net/qHmGe/ _