js实现表格行的动态加入------Day56
2024-10-16 06:17:38
版权声明:本文为博主原创文章,未经博主同意不得转载。
https://blog.csdn.net/marSmile_tbo/article/details/36752655
现代页面通常都是用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(),则执行效果则是这样
我们会发现确实出现了一行,可是并没有单元格,没有详细内容则表格是不完整的,所以一定要记得插入一行的同一时候插入当中的单元格。存在几列就对应的插入几个单元格。同一时候对于单元格的值进行设定都能够
好了,先到这里吧,居然已经这么晚了,怪不得好困啊
最新文章
- @RequestParam @RequestBody @PathVariable 等参数绑定注解详解
- 文档ID:某某 模板文件不存在,无法解析文档!
- Android课程---关于数据存储的学习(2)
- 《程序设计教学法--以Java程序设计为例》
- jdbc事务处理和连接池
- iOS 关于僵尸对象和僵尸指针的那些事儿
- 在Android library中不能使用switch-case语句访问资源ID的原因分析及解决方案
- 大体了解Lua的语法
- 推荐一款好用的项目管理工具:project
- PERL代码摘录
- Error occured processing XML &;#39;Cannot find class [springmvc.extention.BeanArgumentResolver]&;#39;.
- JQuery日记6.9 Promise/A之Callbacks
- 转:详解JMeter正则表达式(2)
- 天梯赛决赛 L2-1.红色警报 并查集
- JDK、JRE、JVM详解
- HDU 1392 Surround the Trees(凸包)
- Java数据类型之byte、char
- [Swift]LeetCode1013. 将数组分成和相等的三个部分 | Partition Array Into Three Parts With Equal Sum
- Mysql 导入CSV文件,中文内容乱码问题
- 针对piix4_smbus ****host smbus controller not enabled的解决方法
热门文章
- spoj 	Help the Military Recruitment Office!
- 『Re』知识工程作业_主体识别
- 一篇关于oracle psu的文章(转)
- shell批量杀进程
- golang channel本质——共享内存
- spring boot 学习(三)API注解记录及测试
- MySQL Server类型之MySQL客户端工具的下载、安装和使用(博主推荐)
- 当前标识没有对“C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files”的写访问权限。
- TClientDataSet的 AddIndex
- selenium(四)操作cookie,伪造cookie