У меня есть стандартная таблица, которая выглядит следующим образом:
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
Я хотел бы добавить перекрывающуюся кликабельную иконку, которая бы сидела между каждым th и td прямо под ним.
Вот изображение:
Эти перекрывающиеся значки / элементы деления / ячейки не должны быть внутри их соответствующих th или td ниже, как они быиметь свое собственное событие jQuery (запускается только значками, а не теми, которые они перекрывают).Таким образом, щелкнув по кнопке th, вы отсортируете данные, щелкнув по td, вы сможете редактировать данные, а щелчок по промежуточному значку позволит растянуть столбец до его полного размера.
Этизначки должны быть полностью частью таблицы и соответствующего столбца таблицы, поскольку они должны реагировать так же, как их столбец (перемещение, растяжение, перетаскивание, скрытие и т. д.)
Чтобы преодолеть это, мне пришлосьсоздайте еще одну невидимую таблицу + thead + th в верхней части исходной таблицы, с иконками в них, и заставьте вторую таблицу двигаться и реагировать точно так же, как и первая.Но это чертовски утомительно и просто делает сценарий излишне сложным.Я должен синхронизировать две таблицы для каждого события, которое действует в целом.Это нормально, но код - настоящий беспорядок.
Существует ли относительно простое ONE TABLE решение моей проблемы?HTML, CSS или jQuery, мне все равно, поскольку он работает простым способом, так что я могу только сосредоточиться на столе и ожидать, что значок будет вести себя соответствующим образом.
Я не спрашиваю особытие, просто как привязать иконку к столбцу таблицы, между каждым и первым под ним.
Спасибо.
PS: в идеале было бы лучше иметь промежуточную ячейку с высотой 0px ниже каждой th (другими словами, целое новое значение tr), выделенную для этих значков, но значок должен иметь z-индекс больше, чем его контейнерячейка, так что значок должен визуально перекрывать верхний и нижний тд (см. рисунок выше).Более того, весь значок должен оставаться активным за пределами области его контейнера.Но я сомневаюсь, что у меня может быть значок с z-индексом, который больше, чем его контейнер, могу я?