设置 html 表中每行的列数限制答案

【问题标题】：set limit for the number of columns per row in a html table设置 html 表中每行的列数限制
【发布时间】：2014-01-04 18:30:47
【问题描述】：

请问有哪些方法可以限制 Html 表格的列数（例如每行 3 列）？

仅供参考，我正在使用 row.insertCell() 将单元格添加到与行 ID 匹配的特定行。我希望将表格中每行的单元格数限制为 3 个。

【问题讨论】：

只需在row.insetCell之前检查表格已经有多少个单元格，如果等于3，你就不要插入单元格。
请添加一些您拥有的代码。您是在创建新表，还是在用户操作后向表中添加新单元格/行？

标签： javascript html html-table

【解决方案1】：

“限制”？没有自然限制。您必须自己在自己的代码中强制执行。

检查您要插入的行是否已经有 3 个单元格，如果有，请不要添加新单元格。

【讨论】：

我知道没有“限制”，但我希望为它设置一个限制我希望将一行中的单元格限制为 3 个并在达到限制后创建另一个新行，有什么想法吗？

【解决方案2】：

使用row.cells 集合检查一行包含多少个单元格。

var row = document.getElementById('row_id'),
    cells = row.cells, max = 3;
if (cells.length < max) {
    // Add cell(s) to #row_id
}

【讨论】：

【解决方案3】：

在 javascript 或 html 标准中没有这样的限制。在插入过程中，您必须自己强制执行。

一个简单的计数器就可以解决问题。

var items = ['c00', 'c01', 'c02', 'c10', 'c11', 'c12'];  //sample data

var table = document.getElementById("myTable");
var row;

for(var i = 0; i < items.length; i++){
  if(i % 3 == 0) {   //after every third cell add a new row and change the row variable to point to it
     row = table.insertRow(-1);      
  }
  var cell = row.insertCell(-1);  //simply insert the row
  cell.innerHTML = items[i];
}

有很多方法可以做到这一点。这实际上取决于您如何构建代码。

【讨论】：

【解决方案4】：

for(i=0;i<3;i++)
row.insertCell()

【讨论】：