JavaScript动态创建表格和增加表格的行
分类：实例代码
JavaScript动态创建表格和增加表格的行属于前端实例代码，有关更多实例代码大家可以查看。
在实际应用中，表格的行数不一定都符合实际要求，需要动态的增加表格行，下面是一段实现此功能的代码实例，同时实现了隔行变色功能。代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态操作表格</title>
</head>
<body>
<script type="text/javascript">
var n = 0;
function showTable(len) {
wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">');
for (i = 0; i < len; i++) {
if (parseInt(i % 2) == 1) {
bg = '#F4FAC7';
} else {
bg = 'white';
}
wi('<tr bgcolor=' + bg + '><td>第' + (i + 1) + '行</td></tr>');
}
wi('</tbody></table><br />');
wi('<input type="button" value="Add" id="add" />');
}
function wi(str) {
return document.write(str);
}
showTable(10);
var add = document.getElementById("add");
add.onclick = function() {
n = n + 1;
if (n % 2 == 0) {
bg = '#F4FAC7';
} else {
bg = 'white';
}
var table = document.getElementById("table");
var tr = document.createElement("tr");
tr.bgColor = bg;
var td = document.createElement("td");
td.innerHTML = '第' + (10 + n) + '行';
tr.appendChild(td);
table.appendChild(tr);
}
</script>
</body>
</html>
JavaScript动态创建表格和增加表格的行，这样的场景在实际项目中还是用的比较多的，关于JavaScript动态创建表格和增加表格的行就介绍到这了。