将具有不同 colspan 的行插入表中答案

【问题标题】：Insert row with different colspan into table将具有不同 colspan 的行插入表中
【发布时间】：2019-04-26 02:37:04
【问题描述】：

我有一个表，我想在其中插入一个与原始表不同的 colspan 的新行。这是我的代码的一部分：

var table = document.getElementById("eTable");    
var rowIndex = document.getElementById(ID).rowIndex;
var row = table.insertRow(rowIndex + 1);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);

我的原始表格有 5 列，但我想合并 cell1、cell2 和 cell3。我怎么做？

【问题讨论】：

"row with a different colspan" HTMLTables中没有这样的东西，rowspan和colspan是td元素的属性。但是您可以合并单元格。添加cell.colspan = 3; 并省略cell3 和cell4。
你会怎么做？
??怎么样？？和我的评论一模一样……
@TheAsker 使用类似var tableBuild = '<table> 的字符串构建表 //根据需要使用 col 或 rowspan 将数据循环到此处` '` 。参考这个解决方案stackoverflow.com/a/8749347/4425004

标签： javascript c# html-table

【解决方案1】：

可以为一列设置 colspan 并跳过其他一些列。根据您的代码（添加的第二行）：

var table = document.getElementById("eTable");    
var rowIndex = document.getElementById("ID").rowIndex;
var row = table.insertRow(rowIndex + 1);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
row = table.insertRow(rowIndex);
cell = row.insertCell(0);
cell1 = row.insertCell(1);
cell1.colSpan = "3";
cell2 = row.insertCell(2);

table { border: 1px solid #000; width: 100%; }
table tr { }
table td { border: 1px solid red; height: 20px;}

<input type="hidden" id="ID" value=0 />
<table id="eTable">
</table>

运行 sn-p 或者如果您愿意，请参阅 fiddle

【讨论】：

【解决方案2】：

试试下面的javascript代码。

var cell2 = row.insertCell(2);
cell2.id = "myTd";
document.getElementById("myTd").colSpan = "3"

【讨论】：