有没有什么办法，可以动态的在html表格中插入列和行_IT百科

//动态添加行与列

function addHtml( )

{

var tab=document.getElementById("viewTabs")//获得表格

var colsNum=tab.rows.item(0).cells.length //表格的列数

var num=document.getElementById("viewTabs").rows.length//表格当前的行数

var rownum=num-1

tab.insertRow(rownum)

for(var i=0i<colsNum-1i++)

{

tab.rows[rownum].insertCell(i)//插入列

tab.rows[rownum].cells[i].innerHTML="dfd"

}

tab.rows[rownum].insertCell(i)

tab.rows[rownum].cells[i].innerHTML="ddddkk"

}

<html>

<head>

function addRow() {

var tb = document.getElementById("tb")

var length = tb.rows.length//该表格的总行数

var row = tb.insertRow(length)//在行末尾添加一行

row.ondblclick = function () { altRowNum1(row)} //为行添加双击事件

var c1 = row.insertCell(0)//添加单元格

c1.innerHTML = length + 1

var c2 = row.insertCell(1)

c2.innerHTML = '<input type="text" />'

var c3 = row.insertCell(2)

c3.innerHTML = '<input type="button" onclick="altRowNum2(this)" value="当前行"/>'

}

function altRowNum1(row) {

var rowIndex = row.rowIndex//行号

alert("行双击，这是第 " + (rowIndex + 1) + " 行，行下标为 " + rowIndex)

}

function altRowNum2(btn) {

var rowIndex = btn.parentNode.parentNode.rowIndex//btn的父节点为单元格，单元格的父节点当前行

alert("单元格按钮单击，这是第 " + (rowIndex + 1) + " 行，行下标为 " + rowIndex)

}

</script>

</head>

<body>

</table>

</div>

</body>

</html>

使用webstorm制作网页文件的时候，难免会遇到制作表格的情况，而且关键的布局方式一般都是使用表格完成的。

工具/原料

电脑

webstorm

方法/步骤

1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。

2、预览网页我们发现，网页显示格式看起来不像是表格，因为没有框线，这时候我们需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页我们就可以看到表格样式。

3、图中的表格表头和文本内容显示格式一致，我们可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。

4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。

5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3。

6、将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11947511.html

有没有什么办法，可以动态的在html表格中插入列和行

发表评论

评论列表（0条）