Table 对象
Table 对象代表一个 HTML 表格。
在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建。
Table 对象集合
table对象 常用集合
1. Table cells 集合
cells 集合返回表格中所有 <td> 或 <th> 元素。
tableObject.cells
.length 返回集合中 <td> 或 <th> 元素的数目。
2. Table rows 集合
rows 集合返回表格中所有行(TableRow 对象)的一个数组,即一个 HTMLCollection。
该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行
tableObject.rows
.length 返回集合中 <tr>元素的数目。
Table 对象方法
table对象常用方法:
1.insertRow() 方法用于在表格中的指定位置插入一个新行。
tableObject.insertRow(index) //index 指定插入新行的位置 (以 0 开始)。
2. deleteRow() 方法用于从表格删除指定位置的行
tableObject.deleteRow(index) //index 指定插入新行的位置 (以 0 开始)。
例子1:下面的例子使用 cells 来显示出第1行第1个单元格的长度:
<html> <head> <script> function displayResult() { alert(document.getElementById("myTable").rows[0].cells.length); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br> <button type="button" onclick="displayResult()">Show number of cells</button> </body> </html>
例子2:显示表格中行的数目
<html> <head> <script> function displayResult() { alert(document.getElementById("myTable").rows.length); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br> <button type="button" onclick="displayResult()">Show number of rows in table</button> </body> </html>
例子3:在表格的第一位置插入一个新行:
<!DOCTYPE html> <html> <head> <script> function displayResult() { var table=document.getElementById("myTable"); var row=table.insertRow(0); var cell1=row.insertCell(0); var cell2=row.insertCell(1); cell1.innerHTML="New"; cell2.innerHTML="New"; } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br> <button type="button" onclick="displayResult()">Insert new row</button> </body> </html>
例子4:删除表格的第一行:
<html> <head> <script> function displayResult() { document.getElementById("myTable").deleteRow(0); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> <br> <button type="button" onclick="displayResult()">Delete first row</button> </body> </html>
例子5:删除当前行
<html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteRow(i); } </script> </head> <body> <table id="myTable" border="1"> <tr> <td>Row 1</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> <tr> <td>Row 2</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> <tr> <td>Row 3</td> <td><input type="button" value="Delete" onclick="deleteRow(this)"></td> </tr> </table> </body> </html>
相关推荐
关于易语言操作word读写或者向word中插入图片的实现,经大量搜索贴子,发现基本思路是明白了(用com对象操作),但是例子代码太少,同时有的代码写法不够严谨或者使用模块等,导致实现效果不理想,也不容易理解.因此开贴,给...
1.在vue中对数组中的某个对象进行操作时(替换、删除),都需要用到该对象在数组中的下标。 前端代码: scope.$index :获取当前行的下标 scope.row:获取当前行的对象 效果图: 思路:通过点击事件将该对象在数组...
关于易语言操作word读写或者向word中插入图片的实现,经大量搜索贴子,发现基本思路是明白了(用com对象操作),但是例子代码太少,同时有的代码写法不够严谨或者使用模块等,导致实现效果不理想,也不容易理解.因此开贴,给...
在开发web程序时,从数据库中取出来的数据页显示table表格页面上,基本的思路是:把数据库表中的每一行数据封装成一个对象,用一个返回类型为List的方法返回这些对象,接着在Struts2的action里面定义一个List属性,...
该产品有许多JTable的子类:从基础的JideTable开始,到CellSpantable,CellStyleTable,SortableTable,然后更先进的TreeTable,PropertyTable和HierarchicaTable。此外,我们建立了许多不同的数据类型CellEditor和...
还要注意的是id属性也会被克隆,也就是克隆后会有两个相同id的元素(如果克隆对象有设置的话),这很容易会导致其他问题,程序会把克隆table的id属性设空。 ps:table请用class来绑定样式,用id的话新table就获取不...
// 支持动态url,传入参数为当前操作的td对象 dataUrl : function(me){ pre = me; while(pre.tagName.toLowerCase() != "td"){ pre = pre.parentNode; } pre = BaseJs.element.prev...
操作word读写或者向word中插入图片的实现,经大量搜索贴子,发现基本思路是明白了(用com对象操作),但是例子代码太少,同时有的代码写法不够严谨或者使用模块等,导致实现效果不理想,也不容易理解.因此开贴,给新人及我等...
3) getIds方法 getIds(表格对象,每条数据的属性id); // 返回需要的 ids 5.修改已知BUG。 vip-admin Html v1.8.0.zip 更新时间:2017-08-26 1.更新layui-v1.0.9为layui-v2.0.2版本。 2.右键...
表格驱动对象模型(A Table-driven Object Model) C++对象模型(The C++ Object Model) 对象模型如何影响程序(How the Object Model Effects Programs) 1.2 关键词所带来的差异(A Keyword Distinction) 关键词...
Protues使用教程 目 录 第一章 概述 2 一、进入Proteus ISIS 2 二、工作界面 3 ...表格输出窗口(Table)菜单 33 方格输出窗口(Grid)菜单 33 Smith圆图输出窗口(Smith)菜单 33 直方图输出窗口(Histogram)菜单 33
单片机仿真软件PROTEUS入门教程 ...表格输出窗口(Table)菜单 33 方格输出窗口(Grid)菜单 33 Smith圆图输出窗口(Smith)菜单 33 直方图输出窗口(Histogram)菜单 33 第二章 基于51的PID炉温度调节器的硬件设计及仿真 34
第一章 概述 2 ...表格输出窗口(Table)菜单 33 方格输出窗口(Grid)菜单 33 Smith圆图输出窗口(Smith)菜单 33 直方图输出窗口(Histogram)菜单 33 第二章 基于51的PID炉温度调节器的硬件设计及仿真(未完成) 34
第一章 概述 2 ...表格输出窗口(Table)菜单 33 方格输出窗口(Grid)菜单 33 Smith圆图输出窗口(Smith)菜单 33 直方图输出窗口(Histogram)菜单 33 第二章 基于51的PID炉温度调节器的硬件设计及仿真(未完成) 34
proteus教程第一章 概述 ...表格输出窗口(Table)菜单 33 方格输出窗口(Grid)菜单 33 Smith圆图输出窗口(Smith)菜单 33 直方图输出窗口(Histogram)菜单 33 第二章 基于51的PID炉温度调节器的硬件设计及仿真(未完成) 34
目 录 ...表格输出窗口(Table)菜单 33 方格输出窗口(Grid)菜单 33 Smith圆图输出窗口(Smith)菜单 33 直方图输出窗口(Histogram)菜单 33 第二章 基于51的PID炉温度调节器的硬件设计及仿真(未完成) 34
19.3.4表格对象741 19.4 DHTMLPage设计器742 19.4.1 DHTMLPage设计器742 19.4.2 DHTML元素编程744 19.4.3 DHTML应用程序748 19.5远程数据服务758 19.5.1 DHTML数据绑定758 19.5.2使用RDS对象763 19.5.3定制商用组件...
19.3.4表格对象741 19.4 DHTMLPage设计器742 19.4.1 DHTMLPage设计器742 19.4.2 DHTML元素编程744 19.4.3 DHTML应用程序748 19.5远程数据服务758 19.5.1 DHTML数据绑定758 19.5.2使用RDS对象763 19.5.3定制商用组件...
Recordset对象可以通过ActiveConnection属性来连接Connection对象。这里的ActiveConnection可以是一个Connection对象或是一串包含数据库连接信息(ConnectionString)的字符串参数。 CursorType Recordset对象Open...