Изменить цвет ‹tr›, когда элемент внутри находится в фокусе

Я хочу изменить цвет элемента 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?


html css
person Aamir Rizwan    schedule 15.04.2012    source источник
comment
Было бы неплохо, если бы вы использовали это для ввода: фокус, это сработает   -  person Jack    schedule 15.04.2012
comment
Да, фокус дает хороший эффект при вводе, но я не хочу выделять всю строку.   -  person Aamir Rizwan    schedule 15.04.2012

Ответы (5)


arrow_upward
8
arrow_downward

Нет. В 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,' ');
    });
}

Однако это не будет работать в IE7, так как версии до 8 не знают document.querySelectorAll (демонстрация). Если вам нужно простое кроссбраузерное решение, вы можете использовать jQuery и следующий код (демонстрация):

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

Не забудьте добавить класс tr.highlight в свой CSS. Имейте в виду, что в будущих версиях jQuery прекратит поддержку старых браузеров (см. Поддержка браузеров), поэтому вам придется использовать jQuery 1.x для IE 8.

person Zeta    schedule 15.04.2012

arrow_upward
8
arrow_downward

Как насчет использования :focus-within...

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

CSS:

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

Скрипка

Что мне помогло. Поскольку выбранный ответ не сработал для меня.

person serverjohn    schedule 18.01.2019
comment
@Aamir Rizwan Это должен быть выбранный ответ для решения только для CSS. - person user1717828; 15.03.2020

arrow_upward
2
arrow_downward

Технически возможно сделать элемент 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!), а не на элементе строки.

person Jukka K. Korpela    schedule 15.04.2012

arrow_upward
0
arrow_downward

Нет, без JavaScript нельзя.

person ezakto    schedule 15.04.2012
comment
Возможно, есть ответ: stackoverflow.com/a/54259425/409102 - person kravemir; 07.01.2021
comment
Ну, в 2012 году focus-in не было ;) - person ezakto; 11.01.2021

arrow_upward
0
arrow_downward

Как раз собирался сказать, что: http://jsfiddle.net/qHmGe/

person Claude Vedovini    schedule 15.04.2012
comment
Включите решение в текст ответа, а не во внешние ссылки. Или дублируйте основной контент внешних ссылок в целях сохранения. - person kravemir; 07.01.2021