js如何動態新增表格行
阿新 • • 發佈：2018-11-10
> 一、總結（點選顯示或隱藏總結內容）
1、table元素有屬性和一些方法（js使用）
方法一：新增可通過在table的innerHTML屬性中新增tr和td來實現
tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>'
方法二：通過table的屬性insertRow()，deleteRow()來實現
var tradd=tab.insertRow(4) 返回值是表格行元素
方法一和方法二對比：
相同點：
都是給元素增加innerHTML
不同點：
方法二靈活超級多：方法一是給table增加innerHTML，方法二是給行元素增加innerHTML，當然方法二要靈活的多
二、js如何實現動態的在表格中新增和刪除行？
1、插入刪除行案例說明
- 例項描述：
動態的插入刪除行以及表格標題等
- 案例要點：
掌握table物件的insertRow()，deleteRow()，createCaption()，deleteCaption()等方法。
2、用到table相關的屬性和方法
Table 物件方法
- createCaption() 為表格建立一個 caption 元素。
- createTFoot() 在表格中建立一個空的 tFoot 元素。
- createTHead() 在表格中建立一個空的 tHead 元素。
- deleteCaption() 從表格刪除 caption 元素以及其內容。
- deleteRow() 從表格刪除一行。
- deleteTFoot() 從表格刪除 tFoot 元素及其內容。
- deleteTHead() 從表格刪除 tHead 元素及其內容。
- insertRow() 在表格中插入一個新行
三、程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格專題</title>
</head>
<body>
<table id="tab" border="1">
<caption>表格名稱</caption>
<thead>
<tr>
<th colspan="3">標題1</th>
</tr>
</thead>
<tbody>
<tr>
<td>單元格11</td>
<td>單元格12</td>
<td>單元格13</td>
</tr>
<tr>
<td>單元格21</td>
<td>單元格22</td>
<td>單元格23</td>
</tr>
<tr>
<td>單元格31</td>
<td>單元格32</td>
<td>單元格33</td>
</tr>
</tbody>
<tfoot><td>備註：</td><td colspan="2"></td></tfoot>
</table>
<p><input type="button" value="增加行" onclick="addtr()">
<input type="button" value="刪除行" onclick=""></p>
<p><input type="button" value="刪除標題" onclick="">
<input type="button" value="新增標題" onclick=""></p>
<script type="text/javascript">
/*
var tab=document.getElementById('tab') //獲取表格元素
var rows=tab.rows; //返回包含表格中所有行的一個數組。
cells=rows[1].cells //某一行的單元格
alert(rows[1].cells[2].innerHTML)
rows[1].cells[2].innerHTML='資料13';
rows[1].cells[2].style.color='red'
*/
/*
//增加行的方法1
function addtr(){
var tab=document.getElementById('tab');
tab.innerHTML+='<tr style="background: green"><td>新增01</td><td>新增02</td><td>新增03</td></tr>'
}
// addtr()
// addtr()
*/
//增加行的方法2
//更加的靈活
function addtr(){
var tab=document.getElementById('tab');
var tradd=tab.insertRow(4)
tradd.style.background='green'
tradd.innerHTML='<td>新增01</td><td>新增02</td><td>新增03</td>'
}
tab.deleteRow(0)
tab.deleteRow(0)
</script>
</body>
</html>
