`

Javascript 对Table的操作属性和方法.

阅读更多
Table表格对象  Table对象:表示HTML文档中的表,对于文档中每个<table>标记,浏览器都创建一个Table对象. 

Table对象集合  

集合  
描述  
cells[] 获取包含表格中所有单元格的数组 
rows[] 获取包含表格中所有行的数组 
tBodies[] 获取包含表格中所有tbody的数组 

Table对象属性  
border 设置或获取表格边框 
caption 设置或获取表格标题 
cellPadding 设置或获取每个单元格边框与内容的宽度 
cellSpacing 设置或获取表格中单元格的间距 
frame 设置或获取表格具有哪些边框 
rules 设置或获取表格中的内部边框 
summary 设置或获取表格的描述 
tFoot 获取表格的tFoot对象 
tHead 获取表格的tHead对象 
width 设置或获取表格宽度 

Table对象方法  
createCaption() 为表格创建一个空的标题元素 
createTFoot() 为表格创建一个空的tFoot元素 
createTHead() 为表格创建一个空的tHead元素 
deleteCaption() 删除表格的标题元素 
deleteRow() 删除指定的表格行 
deleteTFoot() 删除表格的tFoot元素 
deleteTHead() 删除表格的tHead元素 
insertRow() 向表格中插入新行 

  TableCell对象:表示HTML文档中表的单元格,对于文档中每个<td>标记,浏览器都创建一个TableCell对象. 

TableCell对象属性  

属性  
描述  
abbr 设置或获取单元格的摘要 
align 设置或获取单元格中文字的水平对齐方向 
axis 设置或获取以逗号分隔的相关单元格组成的列表 
cellIndex 获取行单元格集合中某单元格的位置 
ch 设置或获取单元格的对齐特征 
chOff 设置或获取单元格的对齐偏移特征 
colSpan 设置或获取单元格跨越的表格列数 
headers 设置或获取以空格分表头单元格的id列表 
height 设置或获取单元格的高度 
innerHTML 设置或获取单元格标记间的HTML文本 
noWrap 设置或获取单元格是否自动换行 
rowSpan 设置或获取单元格跨越的表格行数 
scope 设置或获取与标题相关联的数据列 
vAlign 设置或获取单元格文字的垂直对齐方向 
width 设置或获取单元格的宽度 

  TableRow对象:表示HTML文档中表的行,对于文档中每个<tr>标记,浏览器都创建一个TableRow对象. 

Table对象集合  

集合  
描述  
cells[] 获取表格行中所有列组成的数组 

Table对象属性  
accessKey 设置或获取该对象的快捷键 
align 设置或获取表格行中单元格中文字的水平对齐方向 
chOff 设置或获取单元格的对齐偏移特征 
colSpan 设置或获取单元格跨越的表格列数 
height 设置或获取表格行的高度 
innerHTML 设置或获取表格行标记间的HTML文本 
innerText 设置或获取表格行标记间的文本 
rowIndex 获取表格行对象在表格行集合中的位置 
sectionRowIndex 获取tBody,tHead或tFoot中,表格行对象在行集合中的位置 
tabIndex 设置或获取表格行的Tab顺序索引 
vAlign 设置或获取表格行中文字的垂直对齐方向 
width 设置或获取表格行的宽度 

Table对象方法  
blur() 取消该对象的激活状态 
click() 模拟鼠标单击该对象 
deleteCell([i]) 删除表格行中的指定的单元格 
focus() 将焦点移至表格行 
insertCell() 在表格行中插入新单元格 

文章出处:DIY部落(http://www.diybl.com/course/1_web/javascript/jsjs/20071226/94570.html) 

 

分享到:
评论

相关推荐

    javascript 操作table的特性.docx

    #### 三、JavaScript操作Table的基本方法 1. **获取Table元素**: ```javascript var table = document.getElementById("myTable"); ``` 2. **添加行**: ```javascript var newRow = table.insertRow(0); `...

    tableExport.min.js、xlsx.core.min.zip

    然后,通过在表格元素上添加"data-export-options"属性,或者在JavaScript中设置TableExport插件的选项,可以定制导出行为。例如,你可以指定导出的格式、是否包含表头,甚至可以自定义导出按钮的样式。 以下是一个...

    table数据排序-demo...........

    在IT领域,尤其是在Web开发中,表格(Table)是一种常用的数据展示方式,用户往往需要对表格中的数据进行排序,以便快速查找和分析信息。本文将深入探讨“table数据排序”的概念、实现方法以及相关的编程技术。 一...

    免费下载bootstrap_table参考代码.rar

    10. **API控制**:通过 JavaScript API 和数据属性,可以实现表格的动态操作,如添加、删除、更新行数据。 为了使用这些功能,开发者需要在 HTML 中设置表格结构,并通过 JavaScript 进行初始化和配置。压缩包中的 ...

    bootstrap table-js.rar

    这通常通过调用`$('#table').bootstrapTable({ options })`方法实现,其中`#table`是表格的ID,`options`是一个包含各种配置项的对象。 4. **数据源**:Bootstrap Table支持多种数据源,包括JSON对象数组、服务器端...

    【JavaScript源代码】bootstrap Table的使用方法总结.docx

    以下是对 `bootstrap Table` 使用方法的详细总结: 1. **基本结构**: 在 HTML 中,Bootstrap Table 的基础是一个 `table` 元素,通过添加特定的 `data-*` 属性来配置表格的行为。例如,`data-toolbar` 用于指定...

    javascript万能table合并单元格,隐藏列 html版

    - **列判断**:内层循环遍历每一行中的所有单元格 (`table.rows[i].cells.length`),并判断是否需要对当前列执行合并操作(示例中仅对前四列执行合并操作)。 - **合并逻辑**:如果发现相邻两行的单元格内容相同,则...

    js 实现 table 行排序 TableOrder.rar

    在JavaScript中实现表格(Table)行排序是一种常见的需求,特别是在数据可视化和用户交互丰富的Web应用中。本资源“js 实现 table 行排序 TableOrder.rar”提供了一个实用的方法来实现这个功能。以下是对该实现的...

    JavaScript操作select&&table

    ### JavaScript操作select&&table #### 一、JavaScript操作Select元素 在Web开发中,`&lt;select&gt;`元素...通过上述方法,我们可以灵活地使用JavaScript来操作`&lt;select&gt;`和`&lt;table&gt;`元素,为用户提供更丰富的交互体验。

    前台js将table转为Excel表格下载.rar

    综上所述,"前台js将table转为Excel表格下载.rar"中的实现涉及到前端JavaScript技术,包括DOM操作、CSV格式转换、Blob对象以及创建下载链接等步骤,这些知识点对于开发具有数据导出功能的Web应用至关重要。

    layui-table-merge-master.zip

    layui-table 是layui框架中的表格组件,提供了丰富的功能和高度自定义的选项,使得开发者能够轻松构建各种复杂的表格展示。"layui-table-merge-master.zip" 文件包含了一个关于layui表格行合并的示例或插件,它允许...

    tableExport(demo).zip

    在这个例子中,`#myTable` 是我们要导出的表格ID,`onclick` 属性的函数`exportTable`则调用了`tableExport`方法,指定导出的格式为Excel('excel'),并自定义了文件名('我的表格')。 `tableExport.min.js` 还...

    bootstrap-table-pagejump.zip

    在JavaScript中,通过`bootstrapTable`方法初始化表格,并配置必要的参数。 ```javascript $(function () { $('#table').bootstrapTable({ url: 'data.json', // 数据源 columns: [ /* 列定义 */ ], // 其他...

    table2Excel.rar

    3. **调用插件时传入参数**:在JavaScript中调用Table2Excel时,传递表格ID作为参数,例如`Table2Excel.init({table:'#myTable'});`。 通过上述优化,Table2Excel.js在IE浏览器中应该能正确识别并导出指定的表格,...

    【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx

    在模板部分,创建一个包含`el-table`的`div`元素,并为其绑定数据和一个自定义的`row-class-name`属性,以便我们可以为不可拖动的行设置特定的类: ```html &lt;div class="table"&gt; &lt;el-table ref="dragTable" :...

    Layui组件Table绑定行点击事件和获取行数据的方法

    Layui是一个前端UI框架,它提供了一整套的组件,可以非常方便地构建出美观的界面。其中,Table组件是一个常用的数据展示组件,...通过对Layui组件Table的深入学习和实践,可以有效地提高前端开发的效率和页面的交互性。

    bootstrap table v1.22.2.zip

    其API提供了丰富的选项和方法,例如`data-url`用于指定服务器数据源,`columns`定义列的属性,`toolbar`用于设置工具栏,`search`允许用户搜索数据,`pagination`实现分页功能,`click-row`、`dbl-click-row`等事件...

    JavaScript的Table表格对象

    在JavaScript的世界里,Table表格对象是网页动态交互中不可或缺的一部分,尤其在处理用户数据展示和操作时。本文将深入探讨如何使用JavaScript来操作HTML中的表格元素,包括获取单元格、行的数据以及各种属性。 ...

    table导出excle的插件.zip

    在这个示例中,我们使用了`tableExport`方法来配置导出选项,如导出类型(Excel)和输出文件名。当用户触发导出操作(通常通过点击一个按钮或使用特定的快捷键)时,插件会自动将表格数据转换为Excel格式,并提供...

    bootstrap-table-fixed-columns.js

    在JavaScript中,你还可以通过调用Bootstrap Table的方法来动态改变固定列的设置。例如: ```javascript var $table = $('#table'); $table.bootstrapTable('toggleFixedColumns'); ``` `toggleFixedColumns`方法...

Global site tag (gtag.js) - Google Analytics