码迷,mamicode.com
首页 > 编程语言 > 详细

javascript如何实现动态创建表格和增加表格的行

时间:2015-12-19 12:16:32      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

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/

 

javascript如何实现动态创建表格和增加表格的行

标签:

原文地址:http://www.cnblogs.com/xiaofinder/p/5058833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!