HTML DOM TableData用法及代码示例

HTML DOM中的TableData对象用于表示HTML td元素。可以使用getElementById()方法访问td元素。

用法:

要访问td元素：
```
document.getElementById("id");
```
创建td元素：
```
document.createElement("td");
```

TableData对象属性：

属性	描述
abbr	此属性用于设置或返回abbr属性的值。
align	此属性用于设置或返回数据单元中内容的水平对齐方式。
vAlign	此属性用于设置或返回单元格中内容的垂直对齐方式。
width	此属性用于设置或返回数据单元的宽度。
axis	此属性用于设置或返回相关数据单元格的逗号分隔列表。
background	此属性用于设置或返回数据单元格的背景图像。
bgColor	此属性用于设置或返回表格的背景色。
cellIndex	此属性用于返回表格行的单元格集合中单元格的位置。
ch	此属性用于设置或返回数据单元格的对齐字符。
chOff	此属性用于设置或返回ch属性的水平偏移量。
colSpan	此属性用于设置或返回colspan属性的值。
headers	此属性用于设置或返回headers属性的值。
height	此属性用于设置或返回数据单元格的高度。
noWrap	此属性用于设置或返回是否可以包装单元格中的内容。
rowSpan	此属性用于设置或返回rowspan属性的值。

示例1：访问表数据并添加新内容。

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        table, 
        th, 
        td { 
            border:1px solid green; 
        } 
    </style> 
</head> 
  
<body> 
  
    <body style="text-align:center;"> 
  
        <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
        <h2>DOM TableData Object</h2> 
  
        <table> 
            <tr> 
                <td id="myTd">Geeks</td> 
                <td>For</td> 
                <td>Geeks</td> 
            </tr> 
        </table> 
  
        <p>Click the button to change the 
          text of the first td element.</p> 
  
        <button onclick="myFunction()"> 
          Click Here! 
        </button> 
  
        <p id="demo"></p> 
  
        <script> 
            function myFunction() { 
            //  Accessing Table data 
              var x = 
                document.getElementById("myTd"); 
                x.innerHTML = "Add new content"; 
            } 
        </script> 
  
    </body> 
  
</html>

输出：
在单击按钮之前：

单击按钮后：

示例-2：使用document.createElement(“TD”);创建td元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        table, 
        th, 
        td { 
            border:1px solid green; 
        } 
    </style> 
</head> 
  
  
    <body style="text-align:center;"> 
  
        <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
  
        <h2>DOM TableData Object</h2> 
  
        <table id="myTable"> 
            <tr id="myTr"> 
            </tr> 
        </table> 
  
        <p>Click the button to create a td element.</p> 
  
        <button onclick="myFunction()"> 
          Click Here! 
        </button> 
  
        <script> 
            function myFunction() { 
                
                //  Creating td element. 
                var x =  
                document.createElement("TD"); 
                
                var t =  
                document.createTextNode("Hello Geeks!"); 
                
                x.appendChild(t); 
                document.getElementById( 
                  "myTr").appendChild(x); 
            } 
        </script> 
  
    </body> 
  
</html>

输出：

在单击按钮之前：

单击按钮后：

注意：html5不支持大多数属性。

相关用法

注：本文由纯净天空筛选整理自divyatagoel0709大神的英文原创作品 HTML | DOM TableData Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。