基于JavaScript实现动态创建表格和增加表格行数

在工作，项目需求中，有时候表格的行数不能够满足我们的需求，这时需要我们动态的增加表格的行数，下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法，并且还实现了隔行变色功能。对此感兴趣的朋友可以参考一下代码：

js代码如下所示：

<!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" />');

}</P>

<P>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实现动态创建表格和增加表格行数的相关代码，希望大家喜欢。