HTML DOM Table 对象

最新推荐文章于 2022-12-14 11:58:57 发布

Vip宅男

最新推荐文章于 2022-12-14 11:58:57 发布

阅读量350

点赞数

分类专栏： Java Web开发实战

Java Web开发实战专栏收录该内容

24 篇文章 0 订阅

订阅专栏

able 对象

Table 对象代表一个 HTML 表格。

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

Table 对象集合

W3C： W3C 标准。

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

Table 对象属性

属性	描述	W3C
align	已废弃. 表在文档中的水平对齐方式。	D
background	已废弃设置或者返回表格的背景	D
bgColor	已废弃表格的背景颜色。	D
border	已废弃设置或返回表格边框的宽度。 instead	D
caption	返回表格标题。	Yes
cellPadding	设置或返回单元格内容和单元格边框之间的空白量。	Yes
cellSpacing	设置或返回在表格中的单元格之间的空白量。	Yes
frame	设置或返回表格的外部边框。	Yes
height	已废弃设置或者返回表格高度 instead	D
rules	设置或返回表格的内部边框（行线）。	Yes
summary	设置或返回对表格的描述（概述）。	Yes
tFoot	返回表格的 TFoot 对象。如果不存在该元素，则为 null。	Yes
tHead	返回表格的 THead 对象。如果不存在该元素，则为 null。	Yes
width	已废弃设置或返回表格的宽度。	D

Table 对象方法

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

标准属性和事件

Table 对象同样支持标准的属性和事件。

table对象insertRow deleteRow 使用实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>table对象--插入行和删除行的使用</title>
    <style>
        td{
            border: 1px solid;
            text-align: center;
        }
        .title{
            font-weight: bold;
        }
    </style>
    <script>
        function insertRow(){
            //判断插入的编号是否存在
            for(var i=0;i<myTable.length;i++){
                var eachRow=myTable.rows[i];
                // cells[]:表格中所有单元格的一个数组
                if(eachRow.cells[0].innerText==no.value){
                    window.alert("编号已经存在!");
                    return;
                }
            }
            //获得表单中的数据
            var newTableRow=myTable.insertRow(myTable.rows.length);
            newTableRow.insertCell(0).innerText=no.value;
            newTableRow.insertCell(1).innerText=one.value;
            newTableRow.insertCell(2).innerText=two.value;
        }
        function deleteRow(){
            myTable.deleteRow(myTable.rows.length-1);
        }
    </script>
</head>
<body>
<h1>英雄排行榜</h1>
<table id="myTable" border="1px;">
    <tr class="title">
        <td>排名</td>
        <td>姓名</td>
        <td>外号</td>
    </tr>
    <tr>
        <td>1</td>
        <td>宋江</td>
        <td>及时雨</td>
    </tr>
    <tr>
        <td>2</td>
        <td>卢俊义</td>
        <td>玉麒麟</td>
    </tr>
</table>
<h1>请输入新的好汉:</h1>
<p>编号:<input id="no" type="text" value="" class="qiuqiu"/></p>
<p>名字:<input id="one" type="text" value="" class="qiuqiu"/></p>
<p>外号:<input id="two" type="text" value="" class="qiuqiu"/></p>
<input id="add" type="button" value="添加" οnclick="insertRow()"/>
<input id="del" type="button" value="删除最后一行" οnclick="deleteRow()"/>
</body>
</html>

Table cells 集合

Table 对象

定义和用法

cells 集合返回表格中所有 <td> 或 <th> 元素。

语法

tableObject.cells

属性

属性	描述
length	返回集合中 <td> 或 <th> 元素的数目。

方法

方法	描述
[name_or_index]	一个整数，指定元素检索位置（从0开始）
item(name_or_index)	返回集合中的指定索引的元素
namedItem(name)	返回集合中指定名称索引的元素索引

浏览器支持

所有主要浏览器都支持 cells 集合

实例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Cells集合</title>
    <script>
        function displayResult(){
            alert(document.getElementById("myTable").rows[0].cells.length);
        }
    </script>
</head>
<body>
<table id="myTable" border="1" width="200px;">
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>
<p><input type="button" οnclick="displayResult()" value="显示第一行单元格的数量"/></p>
</body>
</html>