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 代替。 设置或返回数据单元的宽度。 |
