DOM访问表格子元素的常用属性和方法

最新推荐文章于 2021-03-23 12:48:42 发布

lx__angel

最新推荐文章于 2021-03-23 12:48:42 发布

阅读量328

点赞数

文章标签： dom javascript 表格 id

本文链接：https://blog.csdn.net/lx__angel/article/details/78740779

版权

DOM访问表格子元素的常用属性和方法

通过rows[index]返回表格的行的属性

<html>
	<head>
		<title>00</title>
		
	</head>
	<body>
	
		<table id="mytable" border="1">
			<caption>海通科技课程</caption>
			<tr>
				<td>C</td>
				<td>C++</td>
			</tr>
			<tr>
				<td>Android</td>
				<td>Java</td>
			</tr>
			<tr>
				<td>Python</td>
				<td>.NET</td>
			</tr>
		</table>
		
		<input type="button" value="表格标题" οnclick="testbutton1(mytable.caption)"/><br/><br/>
		<input type="button" value="第一行、第一格"
			οnclick="testbutton1(mytable.rows[0].cells[0])"/><br/><br/>
		<input type="button" value="第二行、第二格"
			οnclick="testbutton1(mytable.rows[1].cells[1])"/><br/><br/>
		<input type="button" value="第三行、第二格"
			οnclick="testbutton1(mytable.rows[2].cells[1])"/><br/><br/>
		
		设置指定单元格的值：第<input type="text" id="row" size="2"/>行，
		<input type="text" id="cel" size="2"/>列，改为<input type="text" id="course" size="10"/>
		<input type="button" id="btn_set" value="修改" οnclick="testbutton2()"/>
		
		<br/><br/>
		<hr/>
		<input type="text" id="video" size="20"/>
		
		<script type="text/javascript" charset="utf-8">
			
			
				var videotext=document.getElementById("video");
				var mytable=document.getElementById("mytable");
				var text1=document.getElementById("row");
				var text2=document.getElementById("cel");
				var text3=document.getElementById("course");
				
				
				function testbutton1(target){
					videotext.value=target.innerHTML;
				}
				
				function testbutton2(){
					var a1=text1.value;
					var a2=text2.value;
					var a3=text3.value;
					mytable.rows[a1-1].cells[a2-1].innerHTML=a3;
				}
				
			
		
			
		
		</script>
		
		
		
	</body>

</html>