x max列

Question

背景

我正在使用jquery / ajax动态地向表行添加或删除列。

当表列数达到4时，我创建一个新表行，然后将列添加到其中。

var last_col_count = $('#myTable tr:last').children().length;

//if last row has less than 4 columns then append row with new column
if (last_col_count < 4) {
  $('#myTable > tbody > tr:last').append("<td>...</td>");
} else {
  //table row reached 4 columns, append new table row and add column
  $('#myTable tbody').append("<tr><td>...</td></tr>");
}

问题：

以上情况有效，但是当我需要开始从行中删除列时逻辑上存在差距，然后我在每一行上都有不均匀的列数。

例如：假设我有一个包含3行和4列的表。

_____ COL1  COL2  COL3  COL4
ROW1 |  A  |  B  |  C  |  D  |
ROW2 |  E  |  F  |  G  |  H  |
ROW3 |  I  |  J  |  K  |  L  |

如果我从第一行删除一列，那么我最终得到3行不均匀

_____ COL1  COL2  COL3  COL4
ROW1 |  A  |  B  |  C  |
ROW2 |  E  |  F  |  G  |  H  |
ROW3 |  I  |  J  |  K  |  L  |

要求：

如何确保表总是排序为每行4列？

遵循上述方案的预期结果示例（删除表格列＆＃34; D＆＃34;）：

_____ COL1  COL2  COL3  COL4
ROW1 |  A  |  B  |  C  |  E  |
ROW2 |  F  |  G  |  H  |  I  |
ROW3 |  J  |  K  |  L  |

Answer 1

如果我正确理解了您的问题，为什么不使用占位符作为空单元格，以便一行总是包含四列？如果单元格确实不需要位于特定行中，则必须为每次删除重新生成整个表。如果那些提供了您所请求的自动排序行为，可能会查看一些jQuery表库。

Answer 2

环顾四周，似乎更清洁的方法是使用响应式css＆amp; div的

此处的工作解决方案和代码： https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox