DOM编程学习（2）修改HTML元素

最新推荐文章于 2023-08-17 20:53:39 发布

eabozp

最新推荐文章于 2023-08-17 20:53:39 发布

阅读量155

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 初学

本文链接：https://blog.csdn.net/qq_39528472/article/details/90216438

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

innerHTML：修改大部分HTML页面元素的内容
value：表单控件如<input../><textarea>的内容由该属性控制
className：修改HTML元素的css样式
style：修改HTML的内联cssyang样式
option[]：对select元素的指定列表项赋列表框改列表框、下拉菜单的指定列表项

<body>
	改变第<input id="row" type="text" size="2"/>行，
	第<input id="cel" type="text" size="2" />列的值为：
	<input id="celVal" type="text" size="16" /><br/>
	<input id="chg" type="button" value="改变" onclick="change();"/>
	<table id="d" border="1" style="width:580px;border-collapse:collapse;">
		<tr>
			<td>aaaaaaaaaaa</td>
			<td>ddddddddddd</td>
		</tr>
		<tr>
			<td>aaaaaaaaaaa</td>
			<td>ddddddddddd</td>
		</tr>
		<tr>
			<td>aaaaaaaaaaa</td>
			<td>ddddddddddd</td>
		</tr>
	</table>
	<script type="text/javascript">
		var change=function(){
			var tb = document.getElementById("d");
			var row=document.getElementById("row").value;
			row=parseInt(row);
			if(isNaN(row)){
				alert("您要修改的行必须是整数");
				return false;
			}
			var cel = document.getElementById("cel").value;
			cel=parseInt(cel);
			if(isNaN(cel)){
				alert("您要修改的列必须是整数");
				return false;
			}
			if(row>tb.rows.length||cel>tb.rows.item(0).cells.length)
			{
				alert("要修改的单元格不在表格内");
				return false;
			}
			tb.rows.item(row-1).cells.item(cel-
                   1).innerHTML=document.getElementById("celVal").value;
		}
	</script>
</body>

eabozp

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM编程学习（2）修改HTML元素

innerHTML：修改大部分HTML页面元素的内容 value：表单控件如<input../><textarea>的内容由该属性控制 className：修改HTML元素的css样式 style：修改HTML的内联cssyang样式 option[]：对select元素的指定列表项赋列表框改列表框、下拉菜单的指定列表项<body> 改变第<...
复制链接

扫一扫