您的位置：首页 > Web前端 > HTML

修改HTML元素

2016-04-07 19:57 483 查看

访问到指定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="改变" onclick="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>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航