Всем привет, мы продолжаем решать задачи на JavaScript. Приступим сразу к делу
1. Таблица с полями для редактирования
Мы должны сделать таблицу со значениями, по нажатию на которые должно появляться поле для редактирования. Приступим
Я сделал вот такую красивую таблицу.
Приступим к написанию кода
Подключаемся к элементам td и добавляем им обработчик кликов. При клике создаётся переменная, куда записывается значение ячейки, а потом изменяется HTML содержимое ячейки. В неё добавляется input с атрибутом value, куда записывается наш текст.
Наша колонка при клике превращается в input, но если нажать второй раз, она создаёт новый input, куда добавляет HTML код предыдущего input, надо это исправить.
Можно при активации ячейки добавлять её какой-нибудь класс. А потом проверять, есть ли этот класс
Так уже лучше, но, если кликнуть по нескольким ячейкам сразу, у нас создаётся несколько input'ов, нам нужен код, который будет их деактивировать.
По клику на веб страницу у ячейки таблицы будет удаляться класс "td_active", а input будет снова заменяться своим значением.
Но после этого кода они перестали работать. Дело в том, что сами ячейки тоже относятся к веб-странице, и если кликнуть по ним, они будут открываться и закрываться.
Чтобы это исправить, нужно сделать так, чтобы клик по ячейке не распространялся дальше и не превращался в клик по странице. Для этого нам понадобится функция stopPropagation, которую нужно будет применить к нашему клику.
После этого всё заработало, ячейки стали закрываться при клике на сайт, но по прежнему можно открыть несколько ячеек сразу. Сделаем так, чтобы при открытии новой ячейки, закрывались все старые
Теперь ячейки можно редактировать, инпуты нормально появляются и исчезают. Но инпуты не соответствуют стилям таблицы и меняют её размер, это нужно исправить. Зададим им стили
Всё получилось. Вот код:
Я понимаю, что задачу можно было решить по другому, возможно, можно было решить легче. Сейчас набегут умники в комментариях и начнут критиковать.
Давайте так, если у вас есть более простое и умное решение, спокойно идёте в комментарии и адекватно высказываете свою точку зрения? Хорошо?
Переходим дальше
2. Задача на генерацию таблицы
Это довольно простая задача, нужно сгенерировать таблицу, покрашенную в виде шахматной доски. Приступим...
Добавим тег "table", в котором будем генерировать строки и ячейки.
Создадим скрипт, где в таблице мы сгенерируем тег tbody.
Дальше мы создадим два цикла. Мы создадим 8 строк, в каждую из которых добавим data атрибут, который будет хранить переменную по Y. После чего мы подключимся к строке с нужной координатой Y и добавим туда 8 ячеек, к которым тоже можно добавить data атрибут с x.
Получается это так.
Теперь нам нужно разукрасить эти ячейки. Для этого можно добавить класс "dark", который я заготовил заранее.
Мы можем сделать так. Мы можем брать x и проверять, является ли он чётным. Если да, то добавляем ячейку с классом "dark". На следующей строке должно быть то же самое, но с нечётными x. Для этого мы к x можем просто прибавить y, получится интересный эффект, они будут разукрашены в шахматном порядке.
Получилось очень классно!! 😁😎
Подведём итоги
Сегодня мы решили две удивительные и интересные задачи на таблицы, Если стало интересно, подписывайтесь на канал и ставьте лайки, смотрите другие посты и пишите комментарии 😃