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

2019-11-20 10:58:28

字体：大中小

来源：转载

供稿：网友

在工作，项目需求中，有时候表格的行数不能够满足我们的需求，这时需要我们动态的增加表格的行数，下面小编通过一段代码实例给大家介绍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实现动态创建表格和增加表格行数的相关代码，希望大家喜欢。

上一篇：js实现无缝滚动特效

下一篇：原生js页面滚动延迟加载图片