标签:
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" />‘); }</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>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8011
更多内容可以参阅:http://www.softwhy.com/javascript/
标签:
原文地址:http://www.cnblogs.com/xiaofinder/p/5058833.html