如何使用JS脚本添加表格的行和列

如何使用JS脚本添加表格的行和列,第1张

<table border="1">

<tbody id="new">

<tr><td>a</td><td>1</td></tr>

<tr><td>b</td><td>2</td></tr>

<tr><td>c</td><td>3</td></tr>

</tbody>

</table>

<script type="text/javascript">

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>

js如何在table中插入一行的方法是定位,插入:

1、通过id定位到myTable对象

var table = document.getElementById("myTable")

2、创建一个空的<tr>标签,并且插入到第一行:

var row = table.insertRow(0)

3、插入两列:

var cell1 = row.insertCell(0)

var cell2 = row.insertCell(1)

4、给列分别赋值:

cell1.innerHTML = "NEW CELL1"

cell2.innerHTML = "NEW CELL2"

setAttribute("width","200")设置属性

setAttribute("属性名","属性值")

用insertRow()添加

insertCell()添加列

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>增加Table行</title>

</head>

<script>

function addRow(obj)

{

//添加一行

var newTr = testTbl.insertRow()

//添加两列

var newTd0 = newTr.insertCell()

var newTd1 = newTr.insertCell()

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">'

newTd1.innerText= '新加行'

}

</script>

<body>

<table id="testTbl" border=1>

<tr id="tr1">

<td ><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td ><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr id="tr3">

<td ><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

<br />

<input type="button" id="add" onClick="addRow()" value="Add Row" />

</body>


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存