如何用js向table中写入内容

如何用js向table中写入内容,第1张

JS 语法向body中添加元素用innerHTML,下面是示例代码,供参考:

<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>


欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存