Js заполнить поля таблицы в цикле

Ресурсы: Eclipse Mars for PHP Developers

Цель: Написать на JavaScript программу, которая бы создавала таблицу в HTML с наименьшими затратами по времени.

Итак, создаем новый проект File - New - Project... - JavaScript
После того как проект создан, слева у Вас в PHP Explorer будет папка. На ней откроем контекстное меню и там New - Other - JavaScript.

Рисунок 1 - Выбираем из списка JavaScript Source File

Именно через это меню мы будем создавать файл для HTML, CSS и т.д.

1) Создаем фаил.js
2) создаем файл.html. Можете его создать по шаблону, а можете сами прописать.

// здесь обозначим, что используем HTML 5. Запись короткая в отличии от прошлых версий

// стандартные теги HTML для создания страницы


Заголовок страницы

// подключаем внешний фаил javascript к странице

// в теге тела добавим атрибут onload для работы с javascript, который позволяет запустить нашу функцию после загрузки

Всё, html фаил создан, теперь перейдем к созданию java script файла.

3) Работаем с JavaScript
а) создаем фаил с тем же именем как указано в подключаемом файле html.
б) создаем функцию и указываем такое же имя, как указано в теге body.
В результате будет:


Рисунок 2 - Фрагмент кода JavaScript файла

Итак, в первой строчке видно знакомое уже всем имя функции.
Во второй строчке создаем тег table при помощи выражения document.createElement(элемент) .

Чтобы таблицу можно было различить, задаю ей атрибут бордюр.

В дальнейшем мне нужно будет обратиться к этой таблице, поэтому задаю атрибут тега уникальный id. Итак, добавить какой-нибудь еще атрибут можно с помощью метода setAttribute(имя, значение) .

Затем я вешаю слушатель события к тегу. Но пока этот момент пропустим и вернемся к нему чуть позже.

А теперь запускаем цикл. Там мы будем отрисовывать таблицу, а точнее ее строки и столбцы. Строку мы создадим при помощи метода insertRow(i) , а столбцы - insertCell(j) .

Обращаю внимание , что ячейкам я задаю атрибуты, которые мне потребовались. Это еще один способ указать атрибут тега. В данном случае здесь в качестве тега будет .

И здесь так же мне потребовалось указать id. И вот эта запись:

cell["id"] = "".concat(i,j);

показывает, что переменная cell как массив с ключом id будет иметь значение (с помощью метода склеивания я присоединила к текстовой строке числовые значения) .

Последняя строчка за циклом говорит, что б мы вставили в документ(document) внутри тега body только что созданный элемент и отобразили - метод appendChild(элемент) .

А теперь вернемся к слушателю событий
Цель : Хочу щелкнуть по ячейки и узнать её id.

В методе addEventListener указываю событие, которое хочу отловить, в данном случае это "click". Затем придумываю имя функции, где будет код, который будет что-то делать, если событие пришло. А в конце я указала, что тип отлова мне нужен простой, без наворотов, поэтому false. Итак, как вы поняли или не поняли, но суть в том, что теперь создаем еще одну функцию с именем onClickCell.

function onClickCell(event){
alert(event.target.id);
}

Так как эта функция-Событие, то указываю, что входящим значением является event. В качестве проверки, что я получила результат того, чего хотела, я, использую диалоговое окно alert и оно мне показывает id выбранной (target) мною ячейки.


Рисунок 3 - Пример отлова события с выбранной ячейки.

БОНУС!
Функция проверки при создании таблицы.

function checkCell(){
// Обращаемся к заданному id таблицы и берем элементы ячейки
var idTab= document.getElementById("tab").cells;
// Считаем количество ячеек
var numCells = idTab.length;
// Выводим их по порядку.
for(var td=0; td