Задача вроде бы простая: при щелчке мышью в любую ячейку таблицы, должна выделиться вся строка. И оставаться подкрашенной, пока не выберем другую строчку в таблице или щелкнем в любое место экрана. Для нормальных браузеров решается через tabindex и одной записью на CSS:
1.
tr:focus {background: ...}
Но Internet Explorer как обычно, в своем репертуаре. IE 11 не хочет работать с
tr:focus
Решения в гугле нет, поэтому приведу здесь, может кому пригодится (работает, даже если в ячейке есть другие элементы)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<!DOCTYPE html>
<html>
<head>
<title>Выделить строку в таблице html при нажатии мыши</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {font:12px verdana;}
div {border:1px solid #007200;}
p {border:1px solid #0040A7; margin:5px;}
span {border:1px solid #F58220;}
table {border-collapse:collapse;}
td {border:1px solid #ccc; padding:5px;}
tr:hover {background:#E2EEFF;}
tr:focus {background:#6598C7; color:#fff; outline:0;}
</style>
</head>
<body>
<table id="data">
<tr tabindex="-1">
<td>Текст в ячейке <div>Здесь див <p>Текст абзаца, который внутри див</p> <span>Текст в спан</span> </div> </td>
<td>Текст в ячейке 2 <td>Оперативно-тактическое решение
</tr>
<tr tabindex="-1">
<td>Простая строка 1, простая ячейка 1 <td>Простая строка 1, простая ячейка 2 <td>Выполнение поставленных боевых задач
</tr>
<tr tabindex="-1">
<td>Простая строка 2, простая ячейка 1 <td>Простая строка 2, простая ячейка 2
</tr>
<tr tabindex="-1">
<td>Простая строка 3, простая ячейка 1 <td>Простая строка 3, простая ячейка 2 <td> <div>у строки выше, специально нет ячейки</div>
</tr>
</table>
<script>
function getParentTag(node,tag) {//Найти ближайшего родителя по tagName. Здесь мы движемся вверх, пока не встретим родителя, у которого тег = нашему заданному tag
if (node) {return (node.tagName == tag) ? node : getParentTag(node.parentElement,tag);}
return null;
}
document.getElementById('data').addEventListener('click', getRow);
function getRow(e) {
var row = getParentTag(e.target,'TR');
if (!row) {return;}
row.focus();
}
</script>
</body>
</html>
