Программное изменение ячеек таблицы (например, rowspan) - PullRequest
Новая
       22

Программное изменение ячеек таблицы (например, rowspan)

0 голосов
/ 09 ноября 2019

Я начну с своей цели.

Я использую jQuery и создаю большую таблицу данных из данных, извлеченных из файла JSON. Строки - годы / месяцы, столбцы - категории. Таким образом, таблица из трех категорий за пять лет будет представлять собой три столбца по шестьдесят строк.

Одно событие в таблице может занимать два года, то есть 24 строки. Событие никогда не охватит более одной категории (столбца).

Я не думаю, что смогу построить таблицу как Я добавлю данные - это будет головной болью для сборки, отладкии поддерживать - так что я думаю, что мне нужно построить всю таблицу, а затем программно нацелить ее на ячейки.

Мой вопрос:

После того, как таблица построена со всеми ее ячейками, Есть ли способ - использование DOM-манипуляции (jQuery) для изменения ячеек - добавление ряда строк - так что, скажем, 24 ячейки в одном столбце теперь являются одной ячейкой? (предположительно, мне пришлось бы удалить посторонние 23ячеек.)

Конечно, теоретически, если я построю таблицу виртуально, скажем, в двумерном массиве, - и запишу ее на страницу только после того, как она будет построена, но я могу изменить ее один разэто на DOM?

1 Ответ

0 голосов
/ 09 ноября 2019

Вот что я пытаюсь сделать:

до: 

+---+---+---+---+
|   |   |   |   |
+---+---+---+---+
|   |   |   |   |
+---+---+---+---+
|   |   |   |   |
+---+---+---+---+
|   |   |   |   |
+---+---+---+---+

после: 

+---+---+---+---+
|   |   |   |   |
+---+---+---+---+
|   |   |   |   |
+   +---+---+---+
|   |   |   |   |
+   +---+---+---+
|   |   |   |   |
+---+---+---+---+

Я понял это. Возможно, это не самое элегантное решение (и, честно говоря, оно освещает проблему, выходящую за рамки этого вопроса). 

function replaceRowSpan(cell, rows) {
  cell.attr("rowspan", rows);
  var rowClass = getRowClass(cell);
  if (rowClass) {
    var rowNum = rowClass.split(/-/)[0].substring(1, rowClass.length - 1);
  }
  for (r = 1; r <= rows; r++) {
    $("tr.y" + (rowNum + r).toString()).remove();
  }
};

function getRowClass(el) {
  var parentClasses = el.parent().attr('class')
  if (!parentClasses) return;
  var classList = parentClasses.split(/\s+/);
  for (var i = 0; i < classList.length; i++) {
    if (classList[i].charAt(0) === 'y') {
      return classList[i];
    }
  }
};

replaceRowSpan(cellElement, 4);
<tr class="y0-0">
<td></td><td></td><td></td><td></td>
</tr>
<tr class="y1-0">
<td></td><td></td><td></td><td></td>
</tr>
<tr class="y2-0">
<td></td><td></td><td></td><td></td>
</tr>

Итак,

  • когда у меня есть ячейка td, которую я хочу расширить, я передаю элемент (cellElement)и количество строк (4) для replaceRowSpan ().

  • replaceRowSpan () добавляет диапазон строк к существующему td, а затем находит класс родительского элемента tr tr (через getRowClass ()).

  • затем выполняет итерации по остальным строкам, удаляя их первый элемент (nth-child (1)).

Itработает, но проблема в следующем: это работает только один раз .

Если я хочу развернуть ячейку в другом столбце (скажем, строка 3, столбец 3), то эти ячейки неболее длинное выравнивание, поскольку некоторые строки имеют 2 ячейки, а некоторые - 3. Итак, индекс удаляемых ячеек сбрасывается.

И расхождение накапливается каждый раз, когда я делаю это.

после: 

+---+---+---+---+
|   |   |   |   |
+---+---+---+---+
|   |   |   |   |
+   +---+---+---+
|   |   |   |   |
+   +---+   +---+
|   |   |   |   |
+---+---+---+---+

Я думаю, что смогу обойти это путем подсчета клеток справа, а не слева . Тогда не будет иметь значения, сколько из них было заменено на строки - если я всегда добавляю данные в столбцы только слева направо.

...