JavaScript Table 对象

最新推荐文章于 2023-10-17 10:53:24 发布

咸瑜

最新推荐文章于 2023-10-17 10:53:24 发布

阅读量137

点赞数 1

本文链接：https://blog.csdn.net/m0_46268961/article/details/125378921

版权

HTML DOM Table 对象

Table 对象

Table 对象代表一个 HTML 表格。

在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。

Table 对象方法

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

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

tableObject.insertRow(index)

返回值
返回一个 TableRow，表示新插入的行。
说明
该方法创建一个新的 TableRow 对象，表示一个新的 <tr> 标记，并把它插入表中的指定位置。
新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。
如果表是空的，则新行将被插入到一个新的 <tbody> 段，该段自身会被插入表中。
抛出
若参数 index 小于 0 或大于等于表中的行数，该方法将抛出代码为 INDEX_SIZE_ERR 的 DOMException 异常。

例：在表格的第0行后插入新行

<html>
<head>
    <script type="text/javascript">
        function insRow()
        {
            document.getElementById('myTable').insertRow(0); //在表格的第0行后插入新行
        }
    </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" onclick="insRow()"
    value="Insert new row">

</body>
</html>

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

cells保存着<tr>元素中单元格的 HTMLCollectionin集合；

insertCell(pos) 方法向集合的指定位置插入一个单元格，并返回它的引用(地址),参数为空默认添加到插入最后一行。

例：

function insRow()
        {
            document.getElementById('myTable').insertRow(0); //在表格的第0行后插入新行
            var x = document.getElementById("myTable").insertRow(0);    
            //cells保存着<tr>元素中单元格的 HTMLCollectionin集合；
            //insertCell(pos) 方法 向集合的指定位置插入一个单元格，并返回它的引用(地址),参数为空默认添加到插入最后一行。(下标(pos)是 0 开始的)
            var y = x.insertCell(0);    //y是第1单元格的引用
            var z = x.insertCell(1);    //z是第2单元格的引用
            var a = x.insertCell(2);    //a是第3单元格的引用
            y.innerHTML = '我是第一个单元格 y引用的新增加的内容'
            z.innerHTML = '我是第二个单元格 z引用的新增加的内容';
            a.innerHTML = '我是第三个单元格 a引用的新增加的内容';
        }

你可以用个搞个表格然后按钮onclck即可.

Table 对象集合

集合	描述
cells[]	返回包含表格中所有单元格的一个数组。
rows[]	返回包含表格中所有行的一个数组。
tBodies[]	返回包含表格中所有 tbody 的一个数组。

cells 和 rows 用的比较多

cells 是行的单元格集合

rows 是表格行的集合

自己去用啊

标准属性

属性	描述
className	设置或返回元素的 class 属性。
dir	设置或返回文本的方向。
lang	设置或返回元素的语言代码。
title	设置或返回元素的 title 属性。

Table 对象属性

属性	描述
align	表在文档中的水平对齐方式。(已废弃)
bgColor	表的背景颜色。(已废弃)
border	设置或返回表格边框的宽度。
caption	对表格的 <caption> 元素的引用。
cellPadding	设置或返回单元格内容和单元格边框之间的空白量。
cellSpacing	设置或返回在表格中的单元格之间的空白量。
frame	设置或返回表格的外部边框。
id	设置或返回表格的 id。
rules	设置或返回表格的内部边框(行线)。
summary	设置或返回对表格的描述(概述)。
tFoot	返回表格的 TFoot 对象。如果不存在该元素，则为 null。
tHead	返回表格的 THead 对象。如果不存在该元素，则为 null。
width	设置或返回表格的宽度。

主要还得掌握插删加内容改内容.

下面对cells另一种解释：

Table cells 集合

定义和用法

cells 集合返回表格中指定行的所有 <td> 或 <th> 元素。(集合中全包括但要先获取指定行)

来个代码：

<script type="text/javascript">
        var tables = document.getElementsByTagName("table")[0];        //先得获取道行 才能进行cells的操作！
        var cells = tables.rows[0].cells;
        console.log(cells);

        var cells = tables.rows[1].cells;
        console.log(cells);
    </script>
    </table>