Другие языки программирования и технологии

Web программирование, Обновление таблицы в реальном времени. Научите, пожалуйста!

ТЗ: Скажем, есть таблица 10х10. Под таблицей 2 текстовых поля - X и Y.
Оптимально, если изменяем Х (Y пока пустой) - выделяется цветом вертикальная строка. Добавляем значение в поле Y - должна остаться подсвеченной одна ячейка в таблице.

ПРОШУ! Дайте, плиз, максимально простой, но рабочий исходник. дальше - я сам.
Заранее благодарен!
НК
Николай Коненков
9 459
Какая именно таблица имеется в виду? Если обычная HTML таблица, то не очень понял что там за ячейка должна выбираться по Y.
Если так: вводим X и подсвечивается строка под тем номером который введен, то на Javascript это можно решить так.
Сразу говорю что в таблицах нет ВЕРТИКАЛЬНЫХ СТРОК. Строки всегда горизонтальные, а если они вертикальные, то это не строки, а столбцы. Так что и выделять будем именно строку, горизонтально.
Если X нужно вводить в сами ячейки таблицы, как в Экселе - будет подлиннее, но принцип останется тем же
https://jsfiddle.net/4wf8gzLy/2/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr name="_1">
<td name="_1_1"> </td>
<td name="_1_1"> </td>
<td name="_1_1"> </td>
<td name="_1_1"> </td>
<td name="_1_1"> </td>
</tr>
<tr name="_1">
<td name="_1_2"> </td>
<td name="_1_2"> </td>
<td name="_1_2"> </td>
<td name="_1_2"> </td>
<td name="_1_2"> </td>
</tr>
<tr name="_1">
<td name="_1_3"> </td>
<td name="_1_3"> </td>
<td name="_1_3"> </td>
<td name="_1_3"> </td>
<td name="_1_3"> </td>
</tr>
<tr name="_1">
<td name="_1_4"> </td>
<td name="_1_4"> </td>
<td name="_1_4"> </td>
<td name="_1_4"> </td>
<td name="_1_4"> </td>
</tr>
<tr name="_1">
<td name="_1_5"> </td>
<td name="_1_5"> </td>
<td name="_1_5"> </td>
<td name="_1_5"> </td>
<td name="_1_5"> </td>
</tr>
</tbody>
</table>
X: <input type="text" id="form" value="номер строки"><br>
<input type="button" id="but" value="подсветить строку">
<script type="text/javascript">
let trAll = document.getElementsByName("_1");
let arr_of_trs = [];
for (var i = 0; i < trAll.length; i++) {
arr_of_trs.push(Array.from(document.getElementsByName("_1_" + (i + 1))))
}
form.onfocus = function() {
form.value = '';
}
but.onclick = function() {
if (form.value > trAll.length || !form.value || form.value <= 0) {
alert('строки с таким номером нет');
} else {
for (var i = 0; i < arr_of_trs.length; i++) {
for (var j = 0; j < arr_of_trs[i].length; j++) {
arr_of_trs[i][j].style.backgroundColor = 'transparent';
};
};
for (var i = 0; i < arr_of_trs[form.value - 1].length; i++) {
arr_of_trs[form.value - 1][i].style.backgroundColor = 'yellow';
};
}
form.value = '';
form.focus();
}
</script>
</body>
</html>
Сережа Попов
Сережа Попов
72 161
Лучший ответ
Николай Коненков Спасибо огромное! Прошу прощения - в вопросе неправильно сформулировал. Конечно же при выборе Х должна подсвечиваться не вертикальный столбец, а горизонтальная строка. (но и для столбца это актуально - изменяем Y - должен выделяться столбец)...

А как сделать обновление именно в реальном времени, а не через кнопку? т. е., допустим, в таблице 12 строк. в текстовое поле лапками пишем "12". Написали "1" - подсветилась первая строка, дописали "2" - подсветилась 12?
Николай Коненков Большое человеческое спасибо ещё раз! Посидел, разобрался, всё получилось!.. :)
Откуда оно должно обновляться-то, из каких данных (на сервере, внешних, или как)? И какое время задержки допустимо?
Вячеслав Патынский
Вячеслав Патынский
61 910
Николай Коненков Источник данных не важен. Хочу понять принципы обновления в реальном времени. Оптимально хотелось бы посмотреть на такой пример: Таблица и 3 текстовых поля, в первое пишем X, во второе - Y, в третье - значение ячейки. Допустим X и Y=2. То, что пишется в третье поле должно тут же появляться в таблице (второй столбец, вторая строка).
А вообще не обязательно таблица. Просто - "пишу что-то в текстовом поле, а оно тут же отображается на страничке" тоже пойдёт. Главное, чтобы отображалось сразу, а не через сабмит.

Похожие вопросы