首页 > Web开发 > 详细

js实现表格行的动态添加------Day56

时间:2014-07-06 08:50:07      阅读:513      评论:0      收藏:0      [点我收藏+]

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的。

我们首先要记录的问题是:js动态的添加表格的行和列

我们先给定一个table,先用html语言编写下:

<table width="100%" height="300px" border="1px"  id="tad">
	  <tr><td>1</td><td>1</td></tr>
	  <tr><td>3</td><td>1</td></tr>
	  <tr><td>5</td><td>1</td></tr>
</table> 
这样我们有了一个三行两列的表格,表格的id为tad,显示效果如下:bubuko.com,布布扣

我们通常通过insertRow()来进行插入行,通过insertCell()方法来插入单元格,这样我们来写一下代码:

 var table = document.getElementById("tad");  
     oneRow = table.insertRow();//插入一行
     cell1= oneRow.insertCell();//单单插入一行是不管用的,需要插入单元格
     cell2=oneRow.insertCell();
     cell1.innerHTML = "sdf"; 
     cell2.innerHTML="<a href='#'>retet</a>";

则运行后则发现,效果已经达到了,在table中出现了新的一行
bubuko.com,布布扣

这里如果不写插入单元格,直插入行,值保留oneRow=table.insertRow(),则运行效果则是这样bubuko.com,布布扣

我们会发现确实出现了一行,但是并没有单元格,没有具体内容则表格是不完整的,所以一定要记得插入一行的同时插入其中的单元格,存在几列就相应的插入几个单元格,同时对于单元格的值进行设定都可以


好了,先到这里吧,竟然已经这么晚了,怪不得好困啊

bubuko.com,布布扣

js实现表格行的动态添加------Day56,布布扣,bubuko.com

js实现表格行的动态添加------Day56

原文:http://blog.csdn.net/marsmile_tbo/article/details/36752655

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!