记录下关于操作table相关的函数

记录下关于操作table相关的函数

月光魔力鸭

2018-08-30 13:44 阅读 461 喜欢 0 js操作table 表格的函数

介绍

在我们web开发过程中经常会碰到针对table的一些dom操作,这里整理一下关于这方面的知识点。当然我们可以通过jquery这样的插件来处理,或许会更简单一些,不过现在简单说下原生JS是如何操作的。

针对原生JS


主要有以下操作:

1.创建Table 2.创建row 3.创建cell 4.删除cell、row、table 5.美化table

创建table
var tableObject = document.getElementById('tableId');//获取表格对象,也可以通过createElement来进行创建
//var tableObject = document.createElement('TABLE');
//document.body.appendChild(tableObject);
//前提是,要将js放在dom加载完毕后执行,不然是会报错的。
创建row
var row = tableObject.insertRow(0);
//通过insertRow 方法创建一行,传递index参数,index表示创建第几行,
//0 表示第一行,同时返回一个已经创建的行对象,如果index 小于 0 或 大于表格
//中的行数,则会抛出 INDEX_SIZE_ERR 异常
创建cell
var cell = row.insertCell(0);
//这里的insertCell 几乎等同于insertRow ,不过一个是创建行,一个是创建列。
//同样会返回一个TableCell对象。
删除cell、row、 table
//删除列,通过行对象调用deleteCell方法
row.deleteCell(0);//index 参数为删除第几列
//删除行,通过table对象调用deleteRow 方法
tableObject.deleteRow(0);//index 参数为删除第几行
//删除table
tableObject.remove();//移除自身
document.body.removeChild(tableObject);//通过document移除子节点table
美化table

1.行列合并 2.样式的修改 3.属性的设置

//行列合并,属性为 rowSpan colSpan
cell.colSpan = 3;cell.rowSpan = 2;
//该单元格会合并3列,2行
//样式修改可以直接通过style进行修改
cell.style.color = 'red';//字体颜色为红色..等等,具体可以查看style对象。
//属性设置
cell.setAttribute('name','test');

转载请注明出处: https://chrunlee.cn/article/table-javascript-dom.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
错误:The operation is insecure . 在使用canvas的 toDataUrl的时候报错,看了很多资料,基本上都说是设置跨域,但是我一直都有的啊。其实,只是顺序错了,setAttribute('crossOrigin','Anonymous') 要在设置 src之前设置。
突然来了一个调研任务,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些学生的作品,然后预览啥的,效果还是要全景的效果。 经过一番调查,最终锁定了以前从未接触过的krpano。
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
最近折腾的少了,实在没的写了,大约三四个月没更新了,先水一篇。
在项目开发过程中,分页是少不了的,之前封装了一个分页组件,样式是基于bootstrap的样式,当然也可以自己来修改
关于web打印,需要对页面内容进行页面样式设置,呈现出分页的样子,同时对于题目中的图片或表格尽量不分到两个页面中,因此实现了一个jquery的web打印插件,当然,这个插件目前只适用于部分情况,仅供借鉴
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
偶尔练习下canvas,这里简单记录下常用API,防止遗忘..加深记忆..努力提高..争取突破...daydayup