javascript怎么实现动态创建表格和增加表格的行

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" 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/

1楼萧亮: lt;/Pgt;，lt;Pgt;，，，楼主，这两个P标签是什么意思啊？

javascript怎么实现动态创建表格和增加表格的行

相关推荐