Table 对象的方法

最新推荐文章于 2019-12-04 17:15:41 发布
最新推荐文章于 2019-12-04 17:15:41 发布
阅读量655 收藏 1
点赞数
分类专栏： javascrip 文章标签： table button border function delete 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faunjoe/article/details/4239641
版权

Table 对象的方法

方法描述IEFOW3C
createCaption()为表格创建一个 caption 元素。419Yes
createTFoot()在表格中创建一个空的 tFoot 元素。419Yes
createTHead()在表格中创建一个空的 tHead 元素。419Yes
deleteCaption()从表格删除 caption 元素以及其内容。419Yes
deleteRow()从表格删除一行。419Yes
deleteTFoot()从表格删除 tFoot 元素及其内容。419Yes
deleteTHead()从表格删除 tHead 元素及其内容。419Yes
insertRow()

在表格中插入一个新行。

 

 

定义和用法

createCaption() 方法用于在表格中获取或创建 <caption> 元素。

语法

tableObject.createCaption()

返回值

返回一个 HTMLElement 对象，表示该表的 <caption> 元素。如果该表格已经有了标题，则返回它。如果该表没有 <caption> 元素，则创建一个新的空 <caption> 元素，把它插入表格，并返回它。

实例

下面的例子为表格创建了一个标题：

<html>
<head>
<script type="text/javascript">
function createCaption()
{
var x=document.getElementById('myTable').createCaption()
x.innerHTML="My table caption"
}
</script>
</head>
<body>

<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" οnclick="createCaption()"
value="Create caption">

</body>
</html>
  
  

   
   
定义和用法

   
   
deleteCaption() 方法用于删除表格的 caption 元素及其内容。

   
   
语法

   
   
tableObject.deleteCaption()


   
   
说明


   
   
如果该表有 <caption> 元素，则从文档树种删除它。否则，什么也不做。


  
  


  
  


   
   
实例


   
   
下面的例子删除表格的标题：


   
   
<html>
<head>
<script type="text/javascript">
function deleteCaption()
  {
  document.getElementById('myTable').deleteCaption()
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<caption>My table caption</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" οnclick="deleteCaption()"
value="Delete caption" />

</body>
</html>
    
    

     
     
定义和用法

     
     
deleteCaption() 方法用于删除表格的 caption 元素及其内容。

     
     
语法

     
     
tableObject.deleteCaption()


     
     
说明


     
     
如果该表有 <caption> 元素，则从文档树种删除它。否则，什么也不做。


    
    


    
    


     
     
实例


     
     
下面的例子删除表格的标题：


     
     
<html>
<head>
<script type="text/javascript">
function deleteCaption()
  {
  document.getElementById('myTable').deleteCaption()
  }
</script>
</head>
<body>

<table id="myTable" border="1">
<caption>My table caption</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" οnclick="deleteCaption()"
value="Delete caption" />

</body>
</html>


     
     
定义和用法
deleteRow() 方法用于从表格删除指定位置的行。
语法
tableObject.deleteRow(index)


说明


参数 index 指定了要删除的行在表中的位置。行的编码顺序就是他们在文档源代码中出现的顺序。<thead> 和 <tfoot> 中的行与表中其它行一起编码。


<html>
<head>
<script type="text/javascript">
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="删除" οnclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 2</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
<tr>
  <td>Row 3</td>
  <td><input type="button" value="删除" οnclick="deleteRow(this)"></td>
</tr>
</table>


</body>
</html>


定义和用法


deleteTFoot() 方法用于从表格删除 <tfoot> 元素。


语法


tableObject.deleteTFoot()


说明


如果该表有 <tfoot> 元素，则将它从文档树种删除，否则什么也不做。


<html>
<head>
<script type="text/javascript">
function delRow()
  {
  document.getElementById('myTable').deleteTFoot()
  }
</script>
</head>
<body>


<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tfoot><td>my table foot</td></tfoot>
</table>
<br />
<input type="button" οnclick="delRow()"
value="Delete table foot">


</body>
</html>


定义和用法


deleteTHead() 方法用于从表格删除 <thead> 元素。


语法


tableObject.deleteTHead()


说明


如果该表有 <thead> 元素，则将它从文档树种删除，否则什么也不做。


<html>
<head>
<script type="text/javascript">
function delRow()
  {
  document.getElementById('myTable').deleteTHead()
  }
</script>
</head>
<body>


<table id="myTable" border="1">
<thead><td>my table head</td></thead>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" οnclick="delRow()"
value="Delete table head">


</body>
</html>


      
      


       
       
定义和用法


       
       
insertRow() 方法用于在表格中的指定位置插入一个新行。


       
       
语法


       
       
tableObject.insertRow(index)


       
       
返回值


       
       
返回一个 TableRow，表示新插入的行。


       
       
说明


       
       
该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。


       
       
新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。


       
       
如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。


       
       
抛出


       
       
若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。


      
      


      
      


       
       
提示和注释


       
       
提示：可以用 TableRow.insertCell() 方法给新创建的行添加内容。


      
      


实例


下面的例子在表格的开头插入一个新行：


      
      

       
       <html>
       
       
<head>
       
       
<script type="text/javascript">
       
       
function insRow()
       
       
  {
       
       
  var x=document.getElementById('myTable').insertRow(0)
       
       
  var y=x.insertCell(0)
       
       
  var z=x.insertCell(1)
       
       
  y.innerHTML="NEW CELL1"
       
       
  z.innerHTML="NEW CELL2"
       
       
  }
       
       
</script>
       
       
</head>
      
      


      
      

       
       <body>
       
       
<table id="myTable" border="1">
       
       
<tr>
       
       
<td>Row1 cell1</td>
       
       
<td>Row1 cell2</td>
       
       
</tr>
       
       
<tr>
       
       
<td>Row2 cell1</td>
       
       
<td>Row2 cell2</td>
       
       
</tr>
       
       
<tr>
       
       
<td>Row3 cell1</td>
       
       
<td>Row3 cell2</td>
       
       
</tr>
       
       
</table>
       
       
<br />
       
       
<input type="button" οnclick="insRow()" value="插入行">
      
      


      
      

       
       </body>
       
       
</html>
faunjoe
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Table对象的方法
02-26
Table对象的方法,table表格操作,增加行,删除行
table对象中的insertRow与deleteRow使用示例
09-04
本文将深入探讨 `table` 对象中的 `insertRow` 和 `deleteRow` 方法，并通过一个实际的示例来展示它们的使用方法。 ### 1. `table` 对象 在JavaScript中，`table` 对象代表HTML中的 `<table>` 元素。它提供了多种...
table对象属性方法大全
feng991254的专栏
04-25 852
table对象属性方法大全 默认分类 2009-11-29 09:28:58 阅读64 评论0 <span class="pright fc07 ztag">字号：大中小       Table表格对象Table对象:表示HTML文档中的表
table 表格对象 基本操作
五月天的博客
07-27 570
  Table 对象Table 对象代表一个 HTML 表格。在 HTML 文档中 &lt;table&gt; 标签每出现一次，一个 Table 对象就会被创建。   Table 对象集合 table对象 常用集合1. Table cells 集合   cells 集合返回表格中所有 &lt;td&gt; 或 &lt;th&gt; 元素。   tableObject.cells  ...
javascript的table 对象 属性 方法
jielione的专栏
09-20 4834
javascript的table 对象 属性 方法 Table对象集合 Table对象:表示HTML文档中的表，对于文档中每个标记，浏览器都创建一个Table对象. 集合 描述 cells[]获取包含表格中所有单元格的数组rows[]获取包含表格中所有行的数组tBodies[]获取包含表格中所有tbody的数组 Table对象
Table 对象集合
张扬岁月、敢为天下先
08-20 1065
Table 对象代表一个 HTML 表格。 在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。 Table 对象集合rows 集合返回表格中所有行的一个数组取第三个tr里面的信息<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content" content="text/html;ch
(转载)html中table的使用方法
weixin_30776863的博客
08-06 129
colspan表示该一储存格向右打通的栏数。 rowspan表示该一储存格向下打通的栏数。 colspan是表示横向合并单元格，colspan=“3”表示水平合并三个td rowspan是表示竖直合并单元格，rowspan=“2” 表示竖直合并两个td 源代码： <table width="600" height="300" bordercolor="re...
Document 对象的常用方法
12-11
1、getElementById(id) 通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它. 例如下面的例子，我们可以同DIV的ID迅速的访问到它，而不必通过DOM层层遍历， 代码如下: <body> ’...
基于javascipt-dom编程 table对象的使用
09-05
本篇文章小编为大家介绍，基于javascipt-dom编程 table对象的使用。需要的朋友参考下
BootstrapTable refresh 方法使用实例简单介绍
02-06
在 BootstrapTable 中，`refresh` 方法接受一个可选的参数对象，这个对象可以包含多个配置选项以定制刷新行为。在提供的示例中，我们看到了以下关键配置： 1. **url**: 这是用于获取新数据的服务器端 API 的 URL。...
lua中table的常用方法
天行九歌
11-01 3957
table的五大操作方法： 1：table.sort() language = {"lua","java","c#","c++"} table.sort(language) --只有table一个参数，使用lua默认的排序方式排序 for i, v in ipairs(language) do -- print(v) --输出c# c++ java lua end local func...
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
mengzhengjie的专栏
02-11 1161
http://www.jb51.net/article/44476.htm 本篇文章主要介绍了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以过来参考下，希望对大家有所帮助 insertRow() 方法 定义和用法 insertRow() 方法用于在
HTML DOM Table对象insertRow()方法与deleteRow()方法
杰希默克的博客
09-27 1921
insertRow()方法insertRow()方法用于在表格中的指定位置插入一个新行。 语法：tableObj.insertRow(index) 返回值：返回一个TableRow，表示新插入的行。 说明：该方法创建一个新的TableRow对象，表示一个新的<tr>标记，并把它插入表中的指定位置。新行将被插入index所在行之前。 提示：可以使用TableRow.insertCell()方法
table总结insertRow、deleteRow
beautifulsarah的博客
01-22 1807
 表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列：for (var i=0; i<trCnt; i++)                     table.rows[i].cells.length; javascript操作table:     insertRow()，delete
JavaScript学习笔记：动态添加与删除表格行
howard2005的专栏
12-04 978
JavaScript学习笔记：动态添加与删除表格 一、添加表格行与单元格 Javascript可以控制table，动态的插入行和单元格。rows保存着<tbody>元素中行的HTMLCollection。 语法：tableObject.insertRow(index) 该方法创建一个新的TableRow对象，表示一个新的<tr>标记，用于在表格中的指定位置插入一个新行，并返...
javascript清除table表格方法
热门推荐
希哈科技
08-22 1万+
这篇文章主要介绍了javascript清空table表格的方法,涉及javascript操作table表格的技巧,需要的朋友可以参考下 本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下： 1. 通常方法 循环table的rows，然后一个一个删除。 这个方法是通常的方法，可行，但是效率不好。 2. 另一个方法 ? 1 2 ...
JavaScript的Table表格对象
shuaisweet的专栏
02-13 173
Table表格对象 Table对象:表示HTML文档中的表，对于文档中每个标记，浏览器都创建一个Table对象. Table对象集合 集合 描述 cells[] 获取包含表格中所有单元格的数组 rows[] 获取包含表格中所有行的数组 tBodies[] 获取包含表格中所有tbody的数组 Table对象属性 border 设置或获取表格边框 ...
word Table 对象
最新发布
05-18
Word Table 对象是 Microsoft Word 中的一个对象，它代表一个表格。可以使用该对象来创建、修改和格式化表格。Table 对象有许多属性和方法，可以控制表格的行数、列数、单元格内容、样式、边框等。以下是一些常用的属性和方法： 属性： - Rows：返回 Table 对象中的行数。 - Columns：返回 Table 对象中的列数。 - Range：返回 Table 对象的范围。 方法： - Cell(row, column)：返回 Table 对象中指定行和列的单元格。 - Borders.InsideLineStyle 和 Borders.OutsideLineStyle：设置表格内部和外部边框的样式。 - Cell(row, column).Range.Text：设置或返回指定单元格的文本内容。 - ConvertToText(Separator, NestedTables)：将表格转换为文本。 可以使用 VBA 语言来操作 Word Table 对象。例如，创建一个 2 行 3 列的表格，并设置第一行的文本，可以使用以下代码： ```vb Dim objTable As Table Set objTable = ActiveDocument.Tables.Add(Range:=Selection.Range, NumRows:=2, NumColumns:=3) objTable.Cell(1, 1).Range.Text = "Header 1" objTable.Cell(1, 2).Range.Text = "Header 2" objTable.Cell(1, 3).Range.Text = "Header 3" ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值