基于JavaScript实现动态创建表格和增加表格行数
在工作,项目需求中,有时候表格的行数不能够满足我们的需求,这时需要我们动态的增加表格的行数,下面小编通过一段代码实例给大家介绍js创建表格和增加表格的行数的方法,并且还实现了隔行变色功能。对此感兴趣的朋友可以参考一下代码:
js代码如下所示:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>动态操作表格</title> </head> <body> <scripttype="text/javascript"> varn=0; functionshowTable(len) { wi('<tableborder="1"width="300"style="border-collapse:collapse"><tbodyid="table">'); for(i=0;i<len;i++) { if(parseInt(i%2)==1) { bg='#F4FAC7'; } else { bg='white'; } wi('<trbgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>'); } wi('</tbody></table><br/>'); wi('<inputtype="button"value="Add"id="add"/>'); }</P> <P>functionwi(str) { returndocument.write(str); } showTable(10); varadd=document.getElementById("add"); add.onclick=function(){ n=n+1; if(n%2==0) { bg='#F4FAC7'; } else { bg='white'; } vartable=document.getElementById("table"); vartr=document.createElement("tr"); tr.bgColor=bg; vartd=document.createElement("td"); td.innerHTML='第'+(10+n)+'行'; tr.appendChild(td); table.appendChild(tr); } </script> </body> </html>
以上内容是基于JavaScript实现动态创建表格和增加表格行数的相关代码,希望大家喜欢。