js实现表格行的动态添加------Day56
来源:互联网 发布:西西软件下载网站 编辑:程序博客网 时间:2024/06/16 12:45
现代页面通常都是用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(),则运行效果则是这样
我们会发现确实出现了一行,但是并没有单元格,没有具体内容则表格是不完整的,所以一定要记得插入一行的同时插入其中的单元格,存在几列就相应的插入几个单元格,同时对于单元格的值进行设定都可以
好了,先到这里吧,竟然已经这么晚了,怪不得好困啊
4 2
- js实现表格行的动态添加------Day56
- js实现表格行的动态添加
- js实现动态添加表格的行
- js实现表格的动态添加
- JS 动态添加、删除表格的行
- Js动态添加表格行
- JS动态添加表格行
- JS动态添加表格行
- JS实现动态表格 添加行 删除行 删除列
- js实现动态添加,删除行,onkeyup表格求和
- js动态添加表格
- js动态添加表格
- js动态的添加删除表格的行和列
- js动态的添加删除表格的行和列
- js用克隆(clone)的方法动态添加表格行
- 动态添加删除表格行的js脚本
- js动态添加表格的行与列
- js用克隆(clone)的方法动态添加表格行
- javascript私有属性与封装
- 《国产嵌入式微系统msOS成型记》之九——嵌入式微系统的操作台:面向对象的界面编程
- 《国产嵌入式微系统msOS成型记》之十——嵌入式微系统的筋骨:精简uC/OS-II
- 《国产嵌入式微系统msOS成型记》之十一——嵌入式微系统创新的裸奔双任务系统
- 《国产嵌入式微系统msOS成型记》之终结篇——嵌入式微系统msOS的出发点:应用
- js实现表格行的动态添加------Day56
- 《国产嵌入式微系统msOS成型记》 目录
- LeetCode 57. Length of Last Word
- ADT实现手机调试Android应用程序
- 一个NIO服务器、客户端通信示例
- [LeetCode]Valid Parentheses
- DB封装
- 苦撑待变,时不我待。这个月抓不住,即放手。
- 使用javamail发送邮件