HTML | DOM 表数据对象

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

句法：

• 访问 td 元素：

document.getElementById("id");

• 创建 td 元素：

document.createElement("td");

TableData 对象属性：

Property	Description
abbr	This property is used to set or return the value of the abbr attribute.
align	This property is used to set or return the horizontal alignment of the content in a data cell.
vAlign	This property is used to set or return the vertical alignment of the content within a cell.
width	This property is used to set or return the width of a data cell.
axis	This property is used to set or return a comma-separated list of related data cells.
background	This property is used to set or return the background image of a data cell.
bgColor	This property is used to set or return the background color of a table.
cellIndex	This property is used to return the position of a cell in the cells collection of a table row.
ch	This property is used to set or return an alignment character for a data cell.
chOff	This property is used to set or return the horizontal offset of the ch property.
colSpan	This property is used to set or return the value of the colspan attribute.
headers	This property is used to set or return the value of the headers attribute.
height	This property is used to set or return the height of a data cell.
noWrap	This property is used to set or return whether the content in a cell can be wrapped.
rowSpan	This property is used to set or return the value of the rowspan attribute.

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

html

 

    
        table,
        th,
        td {
            border: 1px solid green;
        }
    

 

 
    
 
         
            GeeksForGeeks 
        
 
        DOM TableData Object
 
        
            
                
                
                
            
        GeeksForGeeks
 
         
Click the button to change the
          text of the first td element.
 
 
        
          Click Here!
        
 
        
 
 
        
            function myFunction() {
            //  Accessing Table data
              var x =
                document.getElementById("myTd");
                x.innerHTML = "Add new content";
            }
        
 
    
 

输出：
点击按钮前：

点击按钮后：

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

html

 

    
        table,
        th,
        td {
            border: 1px solid green;
        }
    

 
 
    
 
         
            GeeksForGeeks 
        
 
        DOM TableData Object
 
        
            
            
        
 
         
Click the button to create a td element.
 
 
        
          Click Here!
        
 
        
            function myFunction() {
               
                //  Creating td element.
                var x =
                document.createElement("TD");
               
                var t =
                document.createTextNode("Hello Geeks!");
               
                x.appendChild(t);
                document.getElementById(
                  "myTr").appendChild(x);
            }
        
 
    
 

输出：
点击按钮前：

点击按钮后：

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

支持的浏览器：

• 谷歌浏览器
• 边缘
• 火狐浏览器
• 歌剧
• 苹果浏览器