[HTML]js动态修改表格里面的内容

时间：2022-01-09 16:11:23
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

	<html>

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<title>Insert title here</title>

	<link rel="stylesheet" href="mytabletest.css" type="text/css">

	<script language="javascript" type="text/javascript">

	function $(id) {

		return document.getElementById(id);

	}

	function addHero() {

		var z;

		var i=$("ph").value;

		for (var j=1;j<$("mytable").rows.length;j++)   {

			if(parseInt(i)>=parseInt($("mytable").rows[j].cells[0].getElementsByTagName("input")[0].value))

			{

				z=j;

			}

		}

		var tableRow=$("mytable").insertRow(z+1);

		var Cell_0=tableRow.insertCell(0);

		Cell_0.innerHTML='<input value="'+$("ph").value+'"  readonly="true"/>';

		Cell_0.className="s1";

		var Cell_1=tableRow.insertCell(1);

		Cell_1.innerHTML='<input value="'+$("xm").value+'"  readonly="true"/>';

		Cell_1.className="s2";

		var Cell_2=tableRow.insertCell(2);

		Cell_2.innerHTML='<input value="'+$("ch").value+'"  readonly="true"/>';

		Cell_2.className="s3";

		var Cell_3=tableRow.insertCell(3);

		Cell_3.innerHTML="<a href='#' onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a>";

		Cell_3.className="s4";

		var Cell_4=tableRow.insertCell(4);

		Cell_4.innerHTML="<a href='#' onclick='edit(this.parentNode.parentNode)' class='edit'>修改</a>";

		Cell_4.className="s5";

	}

	function Del(obj,val) {

		var a=window.confirm("您确定要删除吗？");

		if(a)  {

			$("mytable").deleteRow(val);

		}  else  {

			window.alert("未删除！");

		}

	} 

	function edit(obj) {

		var inp = obj.getElementsByTagName("input");

		for (var i=0,len=inp.length;i<len;i++)

		{

			inp[i].readOnly=false;

		}

	}

	</script>

	</head>

	<body>

	<h1>梁山英雄排行榜</h1>

	<table id="mytable" cellspacing="0px" border="3" bordercolor="red">

		<tr>

			<td class="s_top">排行</td>

			<td class="s_top">姓名</td>

			<td class="s_top">绰号</td>

			<td class="s_top" colspan="2">操作</td>

		</tr>

		<tr>

			<td class="s1"><input value="1" readonly="true"/></td>

			<td class="s2"><input value="宋江" readonly="true"/></td>

			<td class="s3"><input value="呼保义" readonly="true"/></td>

			<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>

			<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>

		</tr>

		<tr>

			<td class="s1"><input value="2" readonly="true"/></td>

			<td class="s2"><input value="卢俊义" readonly="true"/></td>

			<td class="s3"><input value="玉麒麟" readonly="true"/></td>

			<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>

			<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>

		</tr>

		<tr>

			<td class="s1"><input value="3" readonly="true"/></td>

			<td class="s2"><input value="吴用" readonly="true"/></td>

			<td class="s3"><input value="智多星" readonly="true"/></td>

			<td class="s4"><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>

			<td class="s5"><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>

		</tr>

	</table>

	<span class="span1">排行</span><input id="ph" type="text"/>

	<br>

	<span class="span1">姓名</span><input id="xm" type="text"/>

	<br>

	<span class="span1">绰号</span><input id="ch" type="text"/>

	<br>

	<input class="but" type="button" value="添加英雄" onclick="addHero()"/>

	</body>

</html>

　　

另外一种:

步骤：

1、获取表格的dom节点

2、通过rows和cells定位td单元格

3、通过修改innerHTML

示例代码

<body>
<table id='test'>  //定义一个table
<tr>
  <td></td><td></td>
</tr>
</table>
<script>
 var tb = document.getElementById('test');//获取表格的dom节点
 var td = tb.rows[0].cells[0];//获取0行0列的td单元格
 td.innerHTML = '222';//动态修改表格的内容为222
</script>
</body>

相关文章