利用javascript在tbody中自动添加行_IT百科

我是很清楚你的代码要做什么，你代码中有几错错误：

1：i、s、n、p都没有定义

2：你只定义了一个var td，这个只有最后一个add会追加。

下面是我根据你的代码调整你，你看看吧。

我觉得你这样的代码没有什么实际的意义，你要这么实现实在不是好办法。

<html>

<head>

function addTbody() {

var i = "我是i" var s = "我是s" var n = "我是n" var p = "我是p"

var tbody = document.createElement("tbody") //新建一个tbody类型的Element节

var tr = document.createElement("tr") //新建一个tr类型的Element节点

var td1 = document.createElement("td") //新建一个td类型的Element节点

td1.innerHTML = i

tr.appendChild(td1)

var td2 = document.createElement("td") //新建一个td类型的Element节点

td2.innerHTML=s

tr.appendChild(td2)

var td3 = document.createElement("td") //新建一个td类型的Element节点

td3.innerHTML="免费赠送5套餐具"

tr.appendChild(td3)

var td4 = document.createElement("td") //新建一个td类型的Element节点

td4.innerHTML =n

tr.appendChild(td4)

var td5 = document.createElement("td") //新建一个td类型的Element节点

td5.innerHTML ="￥"+p

tr.appendChild(td5)

var td6 = document.createElement("td") //新建一个td类型的Element节点

td6.innerHTML ='1'

tr.appendChild(td6)

tbody.appendChild(tr) //将节点tr加入tbody中

var parNode = document.getElementById("table1") //定位到table上

parNode.appendChild(tbody)

}

</script>

</head>

<body>

<a onclick="addTbody()" href="#">添加tbody</a>

</table>

</body>

</html>

</tbody>

</table>

var table = document.getElementById("new")

// 增加行

var newTR= document.createElement("tr")

var newTD1 = document.createElement("td")

var newText1 = document.createTextNode("d")

var newTD2 = document.createElement("td")

var newText2 = document.createTextNode("4")

newTD1.appendChild(newText1)

newTD2.appendChild(newText2)

newTR.appendChild(newTD1)

newTR.appendChild(newTD2)

table.appendChild(newTR)

//增加列

var tr = table.getElementsByTagName("tr")

for(var i=0i<tr.lengthi++) {

var newTD = document.createElement("td")

var newText = document.createTextNode(i)

newTD.appendChild(newText)

tr[i].appendChild(newTD)

}

</script>

因为ie的兼容性问题（table节点下没法添加tr节点），原表格必须在table节点下有tbody节点，所有的tr节点都是在tbody节点之下。

当我们要添加行的时候，创建tr节点，然后添加到tbody节点之下，再创建对应的td节点，添加到tr节点之下就行了。

测试代码如下：

<table>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

function appendRow() {

var tableBody = document.getElementById('myTableBody')

var newRow = document.createElement('tr')

tableBody.appendChild(newRow)

var td = document.createElement('td')

td.innerHTML = '新行'

newRow.appendChild(td)

}

另外楼下提到的insertRow也可以不过要注意加上参数-1, 这样才可以兼容Firefox。但是insertCell就显得不怎么好用了，因为用insertCell生成的td是没法用innerHTML赋值的

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

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

利用javascript在tbody中自动添加行

发表评论

评论列表（0条）