实战应⽤之DOM快速操作表格元素

最新推荐文章于 2023-08-30 21:07:14 发布

Mr.ZKH

最新推荐文章于 2023-08-30 21:07:14 发布

阅读量314

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100086299

版权

⾸先获取到我们的表格，暂时⽤table1代表整个表格

DOM来获取表头表尾、
因为表头表尾只能存在⼀个，获取表头table1.tHead 获取表尾table1.tFoot

DOM获取表体即
table1.tBodies 获取到的是⼀个集合，因为可以存在多个 tbody

获取⾏数的集合，即需要获取表格对象⾥的tr⾏数的集合
rows

获取⾏⾥⾯单元格td的数量是⼀个集合所以获取内部第⼀个需要
cells[0]获取
cells

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<table id="table1" border="1">
		<thead>
			<td>姓名</td>
			<td>年龄</td>
			<td>身高</td>
		</thead>
		<tbody>
			<tr>
				<td>张三</td>
				<td>18</td>
				<td>180cm</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>20</td>
				<td>170cm</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>18</td>
				<td>190cm</td>
			</tr>
		</tbody>
	</table>

	<script type="text/javascript">
		var table1 = document.getElementById('table1')
		/*alert(table1.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[0].innerHTML)*/

		//快速操作
		alert(table1.tBodies[0].rows[0].cells[0].innerHTML)


	</script>
</body>
</html>

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
实战应⽤之DOM快速操作表格元素

⾸先获取到我们的表格，暂时⽤table1代表整个表格DOM来获取表头表尾、因为表头表尾只能存在⼀个，获取表头table1.tHead 获取表尾table1.tFootDOM获取表体即table1.tBodies 获取到的是⼀个集合，因为可以存在多个 tbody获取⾏数的集合，即需要获取表格对象⾥的tr⾏数的集合rows获取⾏⾥⾯单元格td的数量是⼀个集合所以获取内部第⼀个需...
复制链接

扫一扫