Создаем простую таблицу при помощи JavaScript и HTML
Первая статья о JS или первые шаги в JavaScript.
Ресурсы: 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. Запись короткая в отличии от прошлых версий <!DOCTYPE html>
// стандартные теги HTML для создания страницы <html>
<head>
<title> Заголовок страницы </title>
// в теге тела добавим атрибут onload для работы с javascript, который позволяет запустить нашу функцию после загрузки <body onload=drawTable()>
</body>
</html>
Всё, html фаил создан, теперь перейдем к созданию java script файла.
3) Работаем с JavaScript
а) создаем фаил с тем же именем как указано в подключаемом файле html.
б) создаем функцию и указываем такое же имя, как указано в теге body.
В результате будет:
Рисунок 2 - Фрагмент кода JavaScript файла
Итак, в первой строчке видно знакомое уже всем имя функции. Во второй строчке создаем тег table при помощи выражения document.createElement(элемент).
Чтобы таблицу можно было различить, задаю ей атрибут бордюр.
В дальнейшем мне нужно будет обратиться к этой таблице, поэтому задаю атрибут тега уникальный id. Итак, добавить какой-нибудь еще атрибут можно с помощью метода setAttribute(имя, значение).
Затем я вешаю слушатель события к тегу. Но пока этот момент пропустим и вернемся к нему чуть позже.
А теперь запускаем цикл. Там мы будем отрисовывать таблицу, а точнее ее строки и столбцы. Строку мы создадим при помощи метода insertRow(i), а столбцы - insertCell(j).
Обращаю внимание, что ячейкам я задаю атрибуты, которые мне потребовались. Это еще один способ указать атрибут тега. В данном случае здесь в качестве тега будет <td>.
И здесь так же мне потребовалось указать 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 <= numCells; td++)
alert(td);
} В дальнейшем этот код может пригодиться для работы с ячейками.
