WebAPI-表格相关的常见方法汇总

以你之姓@ 2023-06-12 08:42 99阅读 0赞

#### createCaption() ####

`tableObject.createCaption` 在表格对象中创建或者获取 caption 标签（表格标题）；表格中存在 caption 标签则会获取，不存在时会创建，不会进行覆盖。返回值为获取或创建的 caption 标签。

// 创建表格标签
    var tab = document.createElement('table')
    // 创建表格标题并追加到 table；并获取返回值
    var el = tab.createCaption()
    // 将表格追加到 body 中
    document.body.appendChild(tab)
    
    console.log(el) // <caption></caption>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

#### createTHead() ####

`tableObject.createTHead()` 用于在表格中获取或创建 thead 元素；表格中存在 thead 标签则会获取，不存在时会创建，不会进行覆盖。返回值为获取或创建的 thead 标签。

// 创建表格标签
    var tab = document.createElement('table')
    // 创建表格头部标签并追加到 table；并获取返回值
    var el = tab.createTHead()
    // 将表格追加到 body 中
    document.body.appendChild(tab)
    
    console.log(el) // <thead></thead>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

#### insertRow() ####

`tableObject.insertRow(index)` 用于在表格中的指定位置插入一个新行；返回值为插入的行对象

*  `index` 插入的行在表格中的位置，行的位置默认从 0 开始；省略该参数时默认插入到表格 tbody 标签中的末尾位置

补充：表格的 tbody 标签可以省略（不进行手动创建），浏览器会默认在表格中创建 tbody 标签

// 创建表格标签
    var tab = document.createElement('table')
    // 创建表格行标签并追加到 table 中；并获取返回值
    var row = tab.insertRow()
    // 向当前行中插入内容
    row.innerHTML = '行'
    // 再插入一个行元素，未设置参数时默认插入表格的末尾位置
    tab.insertRow()
    // 将表格追加到 body 中
    document.body.appendChild(tab)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]

#### insertCell() ####

`trObject.insertCell(index)` 向表格中的行的指定位置插入 td 标签（单元格）；返回值为插入的单元格

// 创建表格标签
    var tab = document.createElement('table')
    // 创建表格行标签并追加到 table 中；并获取返回值
    var row = tab.insertRow()
    // 向当前行中插入表格单元格
    var td = row.insertCell()
    // 单元格中插入内容
    td.innerHTML='内容'
    // 将表格追加到 body 中
    document.body.appendChild(tab)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

#### deleteCaption() ####

`tableObject.deleteCaption()` 删除表格的标题

var tab = document.createElement('table')
    // 创建表格标题并追加到 table
    tab.createCaption()
    // 将表格追加到 body 中
    document.body.appendChild(tab)
    
    // 删除表格的标题
    tab.deleteCaption()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]

#### deleteRow() ####

`tableObject.deleteRow(index)` 删除表格中指定位置的行

*  `index` 需要删除的行的索引，第一行的索引为 0；该参数必须要设置否则无效

// 创建表格标签
    var tab = document.createElement('table')
    // 插入第一行
    var row = tab.insertRow()
    // 向当前行中插入表格单元格
    var td = row.insertCell()
    // 单元格中插入内容
    td.innerHTML='内容'
    // 插入第二行
    tab.insertRow()
    // 将表格追加到 body 中
    document.body.appendChild(tab)
    
    // 删除表格中的第一行 
    tab.deleteRow(0)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 5]

#### deleteCell() ####

`trObject.deleteCell(index)` 删除表格行中的指定位置的单元格

*  `idnex` 单元格在当前行中的索引，第一个单元格的索引为 0；该参数必须要设置否则无效

// 创建表格标签
    var tab = document.createElement('table')
    // 创建表格行标签并追加到 table 中
    var row = tab.insertRow()
    // 向当前行中单元格
    var td = row.insertCell()
    td.innerHTML = '单元格'
    
    // 再插入一个单元格
    row.insertCell()
    
    // 再向表格中插入一个行元素
    tab.insertRow()
    // 将表格追加到 body 中
    document.body.appendChild(tab)
    
    // 删除行的第二个单元格
    row.deleteCell(1)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191111102456490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191111103809537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191111114125260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191111141920823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191111142558393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191111143701587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191111145229516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70