В предыдущем уроке вы увидели, как можно делать поиск по таблице, если в ней расставлены data атрибуты. Однако, их ручная расстановка не очень удобная вещь. Гораздо удобнее, если номера ячеек расставит за нас наш скрипт. В этом уроке мы потренируемся писать код для расстановки таких атрибутов.
Дана HTML таблица с пустыми ячейками, например, вот такая:
<table id="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Напишите скрипт, который добавит в каждую
ячейку таблицы атрибут data-col с
номером колонки таблицы, в которой находится
эта ячейка.
Вот HTML код примера таблицы, которая у вас должна получится:
<table id="table">
<tr>
<td data-col="1"></td>
<td data-col="2"></td>
<td data-col="3"></td>
</tr>
<tr>
<td data-col="1"></td>
<td data-col="2"></td>
<td data-col="3"></td>
</tr>
<tr>
<td data-col="1"></td>
<td data-col="2"></td>
<td data-col="3"></td>
</tr>
</table>
Модифицируйте предыдущую задачу так, чтобы в ячейку добавлялся еще и номер ее ряда, вот так:
<table id="table">
<tr>
<td data-row="1" data-col="1"></td>
<td data-row="1" data-col="2"></td>
<td data-row="1" data-col="3"></td>
</tr>
<tr>
<td data-row="2" data-col="1"></td>
<td data-row="2" data-col="2"></td>
<td data-row="2" data-col="3"></td>
</tr>
<tr>
<td data-row="3" data-col="1"></td>
<td data-row="3" data-col="2"></td>
<td data-row="3" data-col="3"></td>
</tr>
</table>
Дана некоторая таблица. Сделайте так, чтобы по клику на любую ячейку в ее текст выводился номер ряда и номер колонки этой ячейки.
Пусть у нас есть некоторая квадратная HTML таблица. В такой таблице есть две диагонали. Назовем главной диагональ, идущую от верхнего левого угла к нижнему правому. Сделайте так, чтобы по клику на любую ячейку главной диагонали эта ячейка красилась в красный цвет фона, а по клику любую другую ячейку - она красилась в зеленый.