修改HTML元素

最新推荐文章于 2024-07-08 09:04:11 发布

Owen William

最新推荐文章于 2024-07-08 09:04:11 发布

阅读量697

点赞数

分类专栏： DOM 文章标签： javascript DOM

本文链接：https://blog.csdn.net/owen_william/article/details/51088849

版权

DOM 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

访问到指定HTML元素之后，还可以对该元素进行修改，通过修改HTML元素可以实现动态更新HTML页面的目的了。修改了HTML元素通常通过修改如下几个常用属性来实现。

下面给出了代码例子：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(owen.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 编辑表格值 </title>
</head>
<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="改变" οnclick="change();" />
	<table id="d" border="1">
		<tr>
			<td>Java</td>
			<td>Java EE</td>
		</tr>
		<tr>
			<td>Ajax</td>
			<td>Java EE</td>
		</tr>
		<tr>
			<td>XML</td>
			<td>Android</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>
</html>

运行结果：