JavaScript动态为table表格添加行
分类：实例代码
JavaScript动态为table表格添加行属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了使用javascript为table表格动态添加一行效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.datalist {
border: 1px solid #429fff; /* 表格边框 */
font-family: Arial;
border-collapse: collapse; /* 边框重叠 */
}
.datalist tr:hover {
background-color: #c4e4ff; /* 动态变色,IE6下无效！*/
}
.datalist caption {
padding-top: 3px;
padding-bottom: 2px;
font: bold 1.1em;
background-color: #f0f7ff;
border: 1px solid #429fff; /* 表格标题边框 */
}
.datalist th {
border: 1px solid #429fff; /* 行、列名称边框 */
background-color: #d2e8ff;
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.datalist td {
border: 1px solid #429fff; /* 单元格边框 */
text-align: right;
padding: 4px;
}
</style>
<script language="javascript">
window.onload=function(){
//插入一行
var oTr = document.getElementById("mytable").insertRow(2);
var aText = new Array();
aText[0] = document.createTextNode("前端教程网一");
aText[1] = document.createTextNode("前端教程网二");
aText[2] = document.createTextNode("前端教程网三");
aText[3] = document.createTextNode("前端教程网四");
aText[4] = document.createTextNode("前端教程网五");
for (var index = 0; index < aText.length; index++) {
var oTd = oTr.insertCell(index);
oTd.appendChild(aText[index]);
}
}
</script>
</head>
<body>
<table id="mytable" class="datalist" summary="财政报表">
<caption>报表 2005 - 2008</caption>
<thead>
<tr>
<th> </th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
<th scope="col">2008</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">2008 年统计</td>
</tr>
</tfoot>
</table>
</body>
</html>
上面的代码实现了我们的要求，可以为表格动态添加一行。
相关阅读：
（1）.insertRow()参阅js insertRow()一章节。
（2）.document.createTextNode()参阅document.createTextNode()一章节。
（3）.insertCell()参阅js insertCell()一章节。
（4）.appendChild()参阅appendChild()一章节。
JavaScript动态为table表格添加行，这样的场景在实际项目中还是用的比较多的，关于JavaScript动态为table表格添加行就介绍到这了。