009-访问表格子元素

HTMLTableElement代表表格,HTMLTableElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。

  • caption:返回该表格的标题对象。可通过修改该属性来改变表格标题。
  • HTMLCollection rows: 返回该表格里所有表格行,该属性会返回<thead……/><tfoot……/><tbody……/>元素里的所有表格行。只读属性。
  • HTMLCollection tBodies:返回该表格里所有<tbody……/>元素组成的数组。
  • tFoot:返回该表格里的<tfoot……/>元素

在获得一个表格之后,完全可以通过上面提供的一系列属性来访问表格“内容”,例如caption属性返回该表格的标题,rows属性返回该表格全部表格行……与前面介绍的完全相似,如果需要访问表格的指定表格行,只需要使用如下格式即可。

  • table.rows[index]:返回该表格index+1行的表格行。

HTMLTableRowElement代表表格行,HTMLtableRowElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。

  • cells:返回该表格行内所有单元格组成的数组。只读属性。
  • rowIndex:返回该表格行在表格内的索引值。只读属性。
  • sectionRowindex:返回该表格行在其所在元素(<body……/><thead……/>等元素)的索引值。只读属性。

HTMLTabelCellElement代表单元格,HTMLTableCellElement对象除了可使用普通HTML元素的各种属性和方法外,还支持如下额外的属性。

  • cellindex:返回该单元格在该表格行内的索引值。只读属性。
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html"/>
		<title>访问表格元素</title>
		
	</head>
	<body>
		<table id="d" border="1" cellspacing="" cellpadding="">
			<caption>部门列表</caption>
			<tr><th>姓名</th><th>年龄</th><th>职位</th></tr>
			<tr><td>张三</td><td>20</td><td>初级程序员</td></tr>
			<tr><td>李四</td><td>21</td><td>中级程序员</td></tr>
			<tr><td>王五</td><td>23</td><td>高级程序员</td></tr>
		</table><br>
		<input type="button" name="" id="" value="表格标题" onclick="alert(document.getElementById('d').caption.innerHTML);"/>
		<input type="button" name="" id="" value="第一行第一格" onclick="alert(document.getElementById('d').rows[1].cells[0].innerHTML);"/>
		<input type="button" name="" id="" value="第二行第二格" onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);"/>
		<input type="button" name="" id="" value="第三行第三格" onclick="alert(document.getElementById('d').rows[3].cells[2].innerHTML);"/>
	</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值