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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。