`

DOM操作table

阅读更多

一、Table对象 
DOM继承关系:Node —— Element —— HTMLElement —— Table 

1、Table对象的属性: 
.rows 
//返回一个数组,存放所有的行对象,即TableRow对象 
除了这个属性之外,其它的就是<table>标记中的属性 

2、Table对象的方法: 
.insertRow( index ) //插入一行,返回新插入的TableRow对象 
.deleteRow( index ) //删除一行 

二、TableRow对象 
DOM继承关系:Node —— Element —— HTMLElement —— TableRow 

1、TableRow对象的属性: 
.cells //返回存放所有单元格的数组,即元素是TableCell对象 
.rowIndex //返回该行所在表中的位置 
除了这两个属性外,其它的就是<tr>标记中的属性 

2、TableRow的方法 
.insertCell( index ) //在指定位置插入一个单元格,返回被插入的单元格(TableCell)对象 
.deleteCell( index ) //删除一个单元格 

三、TableCell对象 
DOM继承关系:Node —— Element —— HTMLElement —— TableCell 

1、TableCell对象的属性 
.cellIndex //返回它在行中的位置 
除了这个属性之外,其它的就是<td>标记中的属性 

分享到:
评论

相关推荐

    js动态创建table点击按钮dom table tr添加操作

    js动态创建table点击按钮dom table tr添加操作

    JavaScript DOM操作表格及样式

    &lt;table&gt;标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var ...

    JS DOM 表格操作

    1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考

    javascript DOM操作之动态删除TABLE多行

    DOM动态删除TABLE tr行的实现代码,需要的朋友可以参考下。

    JS DOM 操作实现代码

    简单的表格: 代码如下: &lt;table&gt; &lt;tr&gt; ”TEST”&gt; &lt;input type=”submit” value=”确定”&gt; &lt;input type=”button” value=”取消”&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; 经测试: 代码如下: var td= document....

    浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class 和标签名来查找DOM元素。这个非常重要,下面的内容都是以此为基础,逐级提高...

    Vue极简代码实现自定义可编辑行及功能按钮的Table表格组件.zip

    封装HTML的Table,可直接编辑单元格内容,光标失去焦点时更新表格数据,利用slot插槽绑定操作按钮(编辑,删除、分享等),涉及到技术点包括:父组件给子组件传值、refs 对DOM进行操作,slot具名插槽的使用,插槽...

    vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: &lt;table v-for=table&gt; &lt;...

    JavaScript Table行定位效果

    很简单,就是节点的父节点,看过dom都知道。 再看看比较容易区分的offsetParent,它在mozilla和msdn都说得比较模糊,在w3c就比较清楚了: The offsetParent attribute, when called on element A, must return the ...

    Element-UI Table组件上添加列拖拽效果实现方法

    而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表的列排序 template 部分: &lt;...

    简洁的EXTJS日期选择插件.rar

     4.table ie处理问题,需要强制指定用dom操作  5.colSpan cellSpacing hideFocus (colspan cellspacing ie dom 设置 有问题 ,直接html 属性小写没问题)  修改代码时请注意,IE 表格操作很脆弱,只能直接DOM

    sorttable.js 排序-方便实用的js排序,只需简单操作即可见到效果 Vue

    sorttable.js 排序-方便实用的js排序,只需简单操作即可见到效果 var stIsIE = /*@cc_on!@*/false; sorttable = { init: function() { // quit if this function has already been called if (arguments...

    layui table数据修改的回显方法

    table.on('tool(test)', function(obj) { var data = obj.data; // 获得当前行数据 var layEvent = obj.event; // 获得 lay-event 对应的值(也可以是表头的event 参数对应的值) var tr = obj.tr; // 获得当前...

    Vue中的ref作用详解(实现DOM的联动操作)

    主要介绍了Vue中的ref作用详解(实现DOM的联动操作),需要的朋友可以参考下

    jquery-gettable:简单的jQuery插件,可轻松获取通过目标单元格的水平线,垂直线或两条线上的表格单元格

    getTable返回一个jQuery对象(或其中的Array),因此您可以对它们执行任何操作。 该表是通过DOM解析的,它是快速,正确的,并且缓存了这些数据。 // Get rows that include target cell. rows = $ ( 'td#target' ...

    有你用的js代码

    一等一有用的js代码 关于获取dom的节点 增加或者删除dom节点 以及对table标签的操作等等

    jQuery为DOM动态追加事件的方法

    处理一个列表绑定,因为是一个展示项目,没有使用复杂的插件,直接jsrender写了个模板,但是后面有一个操作按钮,去查看数据详情,想到了jquery使用on进行事件委托,然后就开搞 最初是这样写的: $(".btn-open").on...

    Python实现简单HTML表格解析的方法

    主要介绍了Python实现简单HTML表格解析的方法,涉及Python基于libxml2dom模块操作html页面元素的技巧,需要的朋友可以参考下

    vue通过数据过滤实现表格合并

    自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作。 要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉。 所以...

Global site tag (gtag.js) - Google Analytics