ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выделить строку в таблице html при нажатии мыши
25 сообщений из 28, страница 1 из 2
  1  все
Выделить строку в таблице html при нажатии мыши
    #39428984
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Задача вроде бы простая: при щелчке мышью в любую ячейку таблицы, должна выделиться вся строка. И оставаться подкрашенной, пока не выберем другую строчку в таблице или щелкнем в любое место экрана. Для нормальных браузеров решается через tabindex и одной записью на CSS:
Код: css
1.
tr:focus {background: ...}

Но Internet Explorer как обычно, в своем репертуаре. IE 11 не хочет работать с tr:focus
Решения в гугле нет, поэтому приведу здесь, может кому пригодится (работает, даже если в ячейке есть другие элементы)
Код: html
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>
...
Рейтинг: 0 / 0
29.03.2017, 10:18
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429000
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
user89,

ИМХО, идеологически и семантически неправильно и некорректно использовать фокус для стилевого выделения строки таблицы.

Используем простейший способ с CSS-классом active и toggle по клику. Работает как часы, работает везде, понятно всем, отлично отлаживается, можно легко выбрать какие элементы активные и не думать и гадать, а сработает ли это у пользователя, семантически верно. Задача и решение стара как мир.
...
Рейтинг: 0 / 0
29.03.2017, 10:34
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429001
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
user89,

Cамая большая проблема у фокуса, что решение на фокусах пойдёт лесом, если надо выделить строку таблицы и ещё что-нибудь.
...
Рейтинг: 0 / 0
29.03.2017, 10:36
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429026
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
hVostt,

приведите, пожалуйста, простое решение для IE. Таблицу можно взять из моего первого сообщения.
...
Рейтинг: 0 / 0
29.03.2017, 11:03
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429029
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
user89,

row.focus(); нет такого
строка таблицы не может получить фокус.
...
Рейтинг: 0 / 0
29.03.2017, 11:04
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429031
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
user89,
как вариант

Код: javascript
1.
2.
3.
4.
  $('.part').on('click', function () {
                $('#tbl1 .part').css('background', 'none'); // убираем со всех строк
                $(this).css('background', '#ccffcc');        // назначаем 
            });



.part - класс в строках таблицы
...
Рейтинг: 0 / 0
29.03.2017, 11:12
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429033
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
вадя,

любой элемент через tabindex может получить фокус
...
Рейтинг: 0 / 0
29.03.2017, 11:12
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429034
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
user89любой элемент через tabindex может получить фокус
да . забыл я про такое....
...
Рейтинг: 0 / 0
29.03.2017, 11:14
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429037
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
вадя,

похожий вариант с перебором я обдумывал, но не знаю какова будет скорость на больших таблицах...
...
Рейтинг: 0 / 0
29.03.2017, 11:16
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429047
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
user89похожий вариант с перебором я обдумывал, но не знаю какова будет скорость на больших таблицах...
можно хранить указатель на выделенную строку и при новом клике удалить только с него и назначить новую строку.
...
Рейтинг: 0 / 0
29.03.2017, 11:21
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429052
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
user89hVostt,

приведите, пожалуйста, простое решение для IE. Таблицу можно взять из моего первого сообщения.

https://jsfiddle.net/vdz7ajwn/
...
Рейтинг: 0 / 0
29.03.2017, 11:30
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429055
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
user89похожий вариант с перебором я обдумывал, но не знаю какова будет скорость на больших таблицах...

Оптимизированный на скорость для огромных таблиц вариант:

https://jsfiddle.net/vdz7ajwn/1/
...
Рейтинг: 0 / 0
29.03.2017, 11:32
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429067
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
user89больших таблицах...
большие таблицы - это сколько строк?
...
Рейтинг: 0 / 0
29.03.2017, 11:40
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429080
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
вадяuser89больших таблицах...
большие таблицы - это сколько строк?Одно из моих приложений выдает 12 тыс.строк х 6 столбцов. Пользователи захотели, чтобы вся выборка тащилась в браузер. В локальной сети тормозов нет, а вся страница занимает меньше 5 Мб.
...
Рейтинг: 0 / 0
29.03.2017, 11:58
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429084
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
hVosttОптимизированный на скорость для огромных таблиц вариант:
https://jsfiddle.net/vdz7ajwn/1/ ОК. Спасибо.
...
Рейтинг: 0 / 0
29.03.2017, 11:59
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429112
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
user89Одно из моих приложений выдает 12 тыс.строк х 6 столбцов. Пользователи захотели, чтобы вся выборка тащилась в браузер
пример идиотов....
...
Рейтинг: 0 / 0
29.03.2017, 12:22
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429113
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
user89Одно из моих приложений выдает 12 тыс.строк х 6 столбцов. Пользователи захотели, чтобы вся выборка тащилась в браузер. В локальной сети тормозов нет, а вся страница занимает меньше 5 Мб.

Если строк будет сильно больше?
...
Рейтинг: 0 / 0
29.03.2017, 12:22
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429149
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
hVostt,

сильно больше не будет. В самом худшем случае за 15 тыс. не перевалит.
...
Рейтинг: 0 / 0
29.03.2017, 12:42
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39429185
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
hVostt
Участник
user89hVostt,

сильно больше не будет. В самом худшем случае за 15 тыс. не перевалит.

Рекомендую уже прямо сейчас озаботиться решением этого вопроса. Лучше уж сделать пейджинг, ограничить страницу пейджинга 12 тыс. строк и по крайне мере не столкнуться с проблемой: срочно, прямо сейчас, пользователи не могут, всё тормозит, аааа!!! Ну и вообще рекомендую никогда не придерживаться прогнозирования удобного "худшего случая". Худший случай это миллионы строк. Если не здесь, то где-нибудь в другом месте. Если не сейчас и не завтра, то послезавтра.
...
Рейтинг: 0 / 0
29.03.2017, 13:09
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39442066
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Забыл решение выложить   Оно основано на варианте от hVostt, только без jQuery
 
Здесь 2 варианта. Через :focus и setAttribute
Код: html
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.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
<!DOCTYPE html>
<html>
<head>
<title>Выделить строку в таблице html при нажатии мыши</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
* {font:12px verdana;}
b {font-weight:700;}
div {border:1px solid #007200;}
p {border:1px solid #0040A7; margin:5px;}
span {border:1px solid #F58220;}
table {border-collapse:collapse; margin:5px 0;}
td {border:1px solid #ccc; padding:5px;}
tr:hover {background:#E2EEFF;}
tr:focus, .activeRow, .activeRow:hover {background:#6598C7; color:#fff; outline:0;}
</style>
</head>
<body>
<b>Вариант 1.</b> Через :focus. Если щелкнуть за пределами таблицы, то выделение снимется.
<table id="data1">
  <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>

<br><br>
<b>Вариант 2.</b> Здесь если щелкнуть за пределами таблицы, то строка останется выделенной.
<table id="data2">
  <tr>
    <td>Текст в ячейке <div>Здесь див  <p>Текст абзаца, который внутри див</p>  <span>Текст в спан</span> </div> </td>
    <td>Текст в ячейке 2 <td>Оперативно-тактическое решение
  </tr>
  <tr>
    <td>Простая строка 1, простая ячейка 1  <td>Простая строка 1, простая ячейка 2 <td>Выполнение поставленных боевых задач
  </tr>
  <tr>
    <td>Простая строка 2, простая ячейка 1 <td>Простая строка 2, простая ячейка 2
  </tr>
  <tr>
    <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('data1').addEventListener('click', selectRow1);
function selectRow1(e) {
  var row = getParentTag(e.target,'TR');
  if (!row) {return;}
  row.focus();
  //console.log(document.activeElement);
}

document.getElementById('data2').addEventListener('click', selectRow2);
function selectRow2(e) {
  var row = getParentTag(e.target,'TR');
  if (!row) {return;}
  var tbl = this,  idx = tbl.getAttribute('activeRowIndex');
  if (idx) {tbl.rows[idx].classList.remove('activeRow');}
  row.classList.add('activeRow');
  tbl.setAttribute('activeRowIndex', row.rowIndex);
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
21.04.2017, 10:03
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39447862
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
user89,

спасибо за пример

подскажите, пожалуйста, как для Варианта_2,
при клике по строке (для выделения) , получить
содержимое второй ячейки этой строки.

Пример:
 

Код: html
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.
48.
49.
50.
51.
52.
53.
54.
55.
<!DOCTYPE html>
<html lang="ru-RU">
<head>
  <meta charset="UTF-8" />                  
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
  <title>...</title>
<style>

  #tb, td {
  	border-collapse: collapse;
  	border: 1px solid grey;
    padding: 2px 8px 2px 12px;
  }
  #tb tr:hover {
    background-color: #ccc;
  }
  .activeRow, .activeRow:hover {background:#6598C7; color:#fff; outline:0;}

</style>
</head>  

<body>

<table id = "tb">
	<tr><td>1</td><td>qqq</td></tr>
	<tr><td>2</td><td>www</td></tr>
	<tr><td>3</td><td>sss</td></tr>
</table>


<script>

// Найти ближайшего родителя по tagName. Здесь мы движемся вверх, пока не встретим родителя,
// у которого тег = нашему заданному tag
function getParentTag(node,tag) {

  if (node) {return (node.tagName == tag) ? node : getParentTag(node.parentElement,tag);}
  return null;
}

document.getElementById('tb').addEventListener('click', selectRow2);

function selectRow2(e) {

  var row = getParentTag(e.target,'TR');
  if (!row) {return;}
  var tbl = this,  idx = tbl.getAttribute('activeRowIndex');
  if (idx) {tbl.rows[idx].classList.remove('activeRow');}
  row.classList.add('activeRow');
  tbl.setAttribute('activeRowIndex', row.rowIndex);
}
</script>
</body>
</html>




например, при клике по второй строке получить www
...
Рейтинг: 0 / 0
03.05.2017, 14:13
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39447894
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alex_Wong, у элемента строка есть коллекция cells, тебе лишь нужно взять innerHTML у нужного по счету элемента коллекции

Пример из МСДН

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
    var count=0;
    for (i=0; i < document.all.oTable.rows.length; i++) {
        for (j=0; j < document.all.oTable.rows(i).cells.length; j++) {
            document.all.oTable.rows(i).cells(j).innerText = count;
            count++;
        }
    }
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=oTable border=1>
<TR><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
</TABLE>
</BODY>
</HTML>
...
Рейтинг: 0 / 0
03.05.2017, 14:42
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39447922
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Alex_Wong,

как правильно сказал krvsa, надо использовать cells . Возможно, этот шаблон будет легче для понимания:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
var rows = myTable.rows;
for (i=0; i<rows.length; i++) {
  var td = rows[i].cells;
  for (j=0; j<td.length; j++) {
   td[j].innerHTML = 'cell[' + i +','+ j +']';
  }
}


На всякий случай, стили для CSS
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
/* Все строки, кроме первой */
tr:not(:first-child) td {border:1px solid #007200;}

/* с первой по 3-ю колонку */
td:nth-child(-n+3)

/* С 5-го столбца и до конца */
td:nth-child(n+5) {color:#008200;}

/* Можно и так(сложнее). Начиная с 3-й колонки и до конца */
td+td+td {text-align:right;}


 
И полигон "Добавить-удалить строки-столбцы"
Код: html
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.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Добавить/Удалить столбцы</title>
<style>
table {
	font:15px arial,sans-serif;
	border-collapse:collapse;
	margin-bottom:10px;
}
td {
	border:1px solid #aaa;
	padding:4px;
}
button {margin:2px;}
</style>
</head>
<body>
<!--
Порывшись в Javascript доках, я нашёл всего несколько кроссбраузерных функций, отвечающих стандарту W3C. Используя которые, тем не менее, можно творить с html таблицей
всё что угодно:
Метод						 Описание
createCaption()	Создает пустой элемент заголовка и добавляет его в таблицу
createTFoot()	Создает пустой элемент TFOOT и добавляет его в таблицу
createTHead()	Создает пустой элемент THEAD и добавляет его в таблицу
insertRow()	Создает пустую строку и добавляет её в таблицу
insertCell(индекс) вставить пустую ячейку
deleteCaption()	Удаляет первый элемент caption
deleteRow() 	Удаляет строку из таблицы
deleteTFoot()	Удаляет элемент TFOOT из таблицы
deleteTHead()	Удаляет элемент THEAD из таблицы
deleteCell(индекс) Удаляет ячейку
-->
<table id="myTable">
	<tr> <td>cell 1_1</td> <td>cell 1_2</td> </tr>
	<tr> <td>cell 2_1</td> <td>cell 2_2</td> </tr>
	<tr> <td>cell 3_1</td> <td>cell 2_3</td> </tr>
	<tr> <td>cell 4_1</td> <td>cell 2_4</td> </tr>
</table>
<button type="button" onclick="AddRowTop()">Вставить строку на самый верх таблицы</button>
<button type="button" onclick="AddRowBottom()">Вставить строку в самый низ таблицы</button>
<br>
<button type="button" onclick="AddColumnLeft()">Добавить колонку в начало таблицы</button>
<button type="button" onclick="AddColumnRight()">Добавить колонку в конец таблицы</button>

<script>
function gid(i) {return document.getElementById(i);}

function AddRowTop() {
	var el = gid('myTable');
	var cols_cnt = el.rows[0].cells.length;
	var row = el.insertRow(0), i = 0;

	for (i=0; i < cols_cnt; i++) {
		var NewCell = row.insertCell(-1);
		NewCell.innerHTML = 'Text on top ' + (i+1).toString();
	}
}

function AddRowBottom() {
	var el = gid('myTable'), i = 0;
	var cols_cnt = el.rows[el.rows.length-1].cells.length;
	var row = el.insertRow(-1);

	for (i=0; i < cols_cnt; i++) {
		var NewCell = row.insertCell(-1);
		NewCell.innerHTML = 'Text on bottom ' + (i+1).toString();
	}
}

function AddColumnLeft() {
	var el = gid('myTable');
	var rows_cnt = el.rows.length;
	var cols_cnt = el.rows[0].cells.length;
	var cell, i = 0;

	for (i=0; i < rows_cnt; i++) {
		cell = el.rows[i].insertCell(0);
		cell.innerHTML = Math.floor(Math.random()*10000);
	}
}

function AddColumnRight() {
	var el = gid('myTable');
	var rows_cnt = el.rows.length;
	var cols_cnt = el.rows[0].cells.length;
	var cell, i = 0;

	for (i=0; i < rows_cnt; i++) {
		cell = el.rows[i].insertCell(-1);
		cell.innerHTML = Math.floor(Math.random()*10000);
	}
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
03.05.2017, 15:07
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39448048
Alex_Wong
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alex_Wong
Гость
user89, krvsa спасибо за помощь

делал так :

 

Код: html
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.
<!DOCTYPE html>
<html lang="ru-RU">
<head>
  <meta charset="UTF-8" />                  
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
  <title>...</title>
<style>

  #tb, td {
  	border-collapse: collapse;
  	border: 1px solid grey;
    padding: 2px 8px 2px 12px;
  }
  #tb tr:hover {
    background-color: #ccc;
  }
  .activeRow, .activeRow:hover {background:#6598C7; color:#fff; outline:0;}

</style>
</head>  

<body onload="numberCells()">

<table id = "tb">
	<tr onclick="cli(this)"><td>1</td><td>qqq</td></tr>
	<tr onclick="cli(this)"><td>2</td><td>www</td></tr>
	<tr onclick="cli(this)"><td>3</td><td>sss</td></tr>
</table>
<script>

function getParentNode(oThis, sNodeName) {
   while(oThis.nodeName != sNodeName && oThis.nodeName != 'BODY') {oThis=oThis.parentNode;}
   return oThis.nodeName!='BODY'?oThis:null;
}


function cli(s) {
var tr = getParentNode(s, 'TR');                                                                                                                          //
var rq = tr.rowIndex; // определяю номер строки по которой кликнули;
alert('info = '+document.getElementById('tb').rows[rq].cells[1].innerHTML);
}
</script>
</body>
</html>




потом выделял строку цветом.

Хотел компактно сделать с Вашим примером, - пока не получилось.
...
Рейтинг: 0 / 0
03.05.2017, 17:22
| Ответить | Цитировать | Написать  
Выделить строку в таблице html при нажатии мыши
    #39448097
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Alex_Wong,

на каждую строку в таблице, вешать клик не надо. Достаточно 1 раз на контейнер...
 
Так пойдет?
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<title>tmp</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
*, *:before, *:after {box-sizing:border-box; font:14px arial;}
table {border-collapse: collapse;}
td {	
  border: 1px solid #ccc;
  padding: 2px 8px 2px 12px;
}
#tb tr:hover {background:#E2EEFF;}
#tb .activeRow, #tb .activeRow:hover {background:#6598C7; color:#fff;}
</style>
</head>
<body>
<table id="tb">
  <tr> <td>1 <td>qqq
  <tr> <td>2 <td>www
  <tr> <td>3 <td>sss
</table>

<script>
function getParentTag(node,tag) {
  if (node) {return (node.tagName == tag) ? node : getParentTag(node.parentElement,tag);}
  return null;
}

var tb = document.getElementById('tb');
tb.setAttribute('activeRowIndex', 0);
tb.addEventListener('click', cli);
function cli(e) {
  var row = getParentTag(e.target,'TR');
  if (!row) {return;}
  var tbl = this,  idx = tbl.getAttribute('activeRowIndex');
  tbl.rows[idx].classList.remove('activeRow');
  row.classList.add('activeRow');
  tbl.setAttribute('activeRowIndex', row.rowIndex);
  alert('info = ' + row.cells[1].innerHTML);
}
</script>
</body>
</html>

...
Рейтинг: 0 / 0
03.05.2017, 18:06
| Ответить | Цитировать | Написать  
25 сообщений из 28, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Выделить строку в таблице html при нажатии мыши
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]