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

浏览数：17 / 时间：2015年06月09日

现代页面通常都是用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，显示效果如下：

我们通常通过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中出现了新的一行

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

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


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


js实现表格行的动态添加------Day56,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： javascript table 动态操作 javascript table 动态操作

相关文章

随机文章

您可能还喜欢

您可能还喜欢