小码哥的IT人生

HTML DOM TableHeader 对象

JavaScript基础 2022-05-13 16:23:27小码哥的IT人生shichen

HTML DOM TableHeader 对象

TableHeader 对象

TableHeader 对象是 HTML5 中的新对象。

TableHeader 对象表示 HTML <th> 元素。

访问 TableHeader 对象

您可以通过使用 getElementById() 来访问 <th> 元素:

var x = document.getElementById("myTh");

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<h3>演示如何访问 TH 元素</h3>
<table>
 <tr>
   <th id="myTh">名字</th>
 </tr>
 <tr>
   <td>乔布斯</td>
 </tr>
</table>
<p>点击按钮来改变 TH 元素的文本。</p>
<button onclick="myFunction()">亲自试一试</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x = document.getElementById("myTh");
x.innerHTML = "新的表头";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

创建 TableHeader 对象

您可以通过使用 document.createElement() 方法来创建 <th> 元素:

var x = document.createElement("TH");

完整实例:

<!DOCTYPE html>
<html>
<head>
<style>
table,th
{
border:1px solid black;
}
</style>
</head>
<body>
<table id="myTable">
  <tr id="myTr">
  </tr>
</table>
<h3>演示如何创建 TH 元素</h3>
<p>点击按钮来创建 TH 元素。</p>
<button onclick="myFunction()">亲自试一试</button>
<script>
function myFunction()
{
var x = document.createElement("TH");
var t = document.createTextNode("新的表头");
x.appendChild(t);
document.getElementById("myTr").appendChild(x);
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

TableHeader 对象属性

属性 描述
abbr 设置或返回 abbr 属性值。
align

HTML5 中不支持。请使用 style.textAlign 代替。

设置或返回数据单元中内容的水平对齐方式。

axis

HTML5 中不支持。

设置或返回相关联数据单元的以逗号分隔列表。

background

HTML5 中不支持。请使用 style.background 代替。

设置或返回数据单元的背景图像。

bgColor

HTML5 中不支持。请使用 style.backgroundColor 代替。

设置或返回表格的背景色。

cellIndex 返回表格行 cells 集合中单元的位置。
ch

HTML5 中不支持。

设置或返回数据单元的对齐字符。

chOff

HTML5 中不支持。

设置或返回 ch 属性的水平偏移。

colSpan 设置或返回 colspan 属性值。
headers 设置或返回 headers 属性值。
height

HTML5 中不支持。请使用 style.height 代替。

设置或返回数据单元的高度。

noWrap

HTML5 中不支持。请使用 style.whiteSpace 代替。

设置或返回单元内的内容是否能够折行。

rowSpan 设置或返回 rowspan 属性值。
vAlign

HTML5 中不支持。请使用 style.verticalAlign 代替。

设置或返回单元内容的垂直对齐方式。

width

HTML5 中不支持。请使用 style.width 代替。

设置或返回数据单元的宽度。

标准属性和事件

TableHeader 对象支持标准属性事件

相关页面

HTML 教程:HTML 表格

HTML 参考手册:HTML <th> 标签

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024