<script>
var div1 = document.getElementById('DIV1')
var code = '<TABLE>'
code += '<TR><TH>姓名</TH><TH>性别</TH></TR>'
code += '<TR><TD>张三</TD><TD>男</TD></TR>'
code += '<TR><TD>李三</TD><TD>女</TD></TR>'
code += '<TR><TD>王三</TD><TD>男</TD></TR>'
code += '<TR><TD>赵三</TD><TD>男</TD></TR>'
div1.innerHTML = code + '</TABLE>'
</script>
<body>
<div id='div1'></div>
</body>
但通常来说,开发者习惯动态的去添加行而非动态生成表格,因为表头基本都是固定的,每次都刷影响效率,故代码如下:
<script>
var div1 = document.getElementById('tb1')
var code = ''
code += '<TR><TD>张三</TD><TD>男</TD></TR>'
code += '<TR><TD>李三</TD><TD>女</TD></TR>'
code += '<TR><TD>王三</TD><TD>男</TD></TR>'
code += '<TR><TD>赵三</TD><TD>男</TD></TR>'
div1.innerHTML = code
</script>
<body>
<div>
<table>
<THEAD><TR><TH>姓名</TH><TH>性别</TH></TR></THEAD>
<TBODY id='tb1'></TBODY>
</table>
</div>
</body>
<!DOCTYPE html><html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>testing</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function ()
{
var table = document.getElementsByTagName ("table")[0]
table.insertBefore(document.createElement('tbody'), table.tBodies[0])
table.appendChild(document.createElement('tbody'))
}
</script>
</head>
<body>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
我是很清楚你的代码要做什么,你代码中有几错错误:
1:i、s、n、p都没有定义
2:你只定义了一个var td,这个只有最后一个add会追加。
下面是我根据你的代码调整你,你看看吧。
我觉得你这样的代码没有什么实际的意义,你要这么实现实在不是好办法。
<html><head>
<title></title>
<script>
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 id="table1">
</table>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)