Как сверстать такую таблицу?

Question

[Zhalgas Saparov]

Всем привет. Не могу построить логику для верстки данной таблицы


Делаю я все это на nuxt'e.
Для начало, как мне отслеживать ячейки, чтобы при добавлений данных я не ошибся ячейкой? Я думаю добавить каждому
id, и при клике отсылать id и с помощью filter находить нужный массив объекта по id.
Также как поставить появляющийся input div под нажатой ячейкой? Верстать для каждой ячейки появляющийся input div блок такое себе, но и другого варианта пока не нашел.
Заранее благодарю за ответы)

Answer 1

[Игорь]

Не думаю что вам нужно для каждой ячейки верстать это окно. Оно ведь не будет появляться более чем над одной ячейкой одновременно я полагаю, Значит просто сверстайте 1 раз, и меняйте координаты его появления в зависимости от того по какой ячейки кликнули. Это окно можно показывать относительно курсора мыши при клике например. Для отслеживания ячеек не обязательно использовать ID, для пользовательских данных придумали data атрибуты, я бы на вашем месте использовал их.

Comments

[Zhalgas Saparov]

loonny, Получается, я могу ячейки отслеживать по data, то есть мне нужно при нажатий отсылать data выбраный ячейки, верно?
Это не будет плохим тоном?

[Игорь]

Zhalgas Saparov, Простите я не понял вопрос.

[Zhalgas Saparov]

loonny, Ничего страшного, я пишу проект на nuxt'e. И у ячеек есть свои эффекты, как нажатый, активный и т.д. и мне нужно динамически добавлять классы. Это я делаю с помощью v-bind:class={}.
Так вот, чтобы понять в какую ячейку я должен добавить класс или получить координаты, все это я хотел сделать с помощью id, но мне это решение не совсем нравится, и вы предложили html dat'ы.

[Игорь]

Zhalgas Saparov, Теперь вы не задали вопрос вовсе)

[Zhalgas Saparov]

loonny, Сори ^^. Так вот мне нужно как-то отслеживать чтобы добавлять динамически классы, данные. Смогу ли я это сделать с помощью html data? К примеру: Есть ячейка

<td date-id="1" @click="Функция в которую я передаю значение атрибута date-id"> {{ Тут данные для ячейки которые я тяну из date() }} </td>

[Zhalgas Saparov]

loonny, Для меня самое сложное, это как мне разделить ячейки чтобы я могу им управлять с помощью js'ки.

[Игорь]

Я не понимаю зачем что либо передавать в функцию, если можно просто использоватьthis.dataset.idвнутри функции обработчика?

[Игорь]

а найти можноdocument.querySelectot('[data-id="1"]')