你的位置:首页 > Java教程

[Java教程]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" ><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/