欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间：2022/11/16 HTML 15 老码农
如意编程网 收集整理的这篇文章主要介绍了 [HTML]js动态修改表格里面的内容 小编觉得挺不错的,现在分享给大家,帮大家做个参考. 
<!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 >
		<tr>
			<td>排行</td>
			<td>姓名</td>
			<td>绰号</td>
			<td colspan="2">操作</td>
		</tr> 
		<tr>
			<td><input value="1" readonly="true"/></td>
			<td><input value="宋江" readonly="true"/></td>
			<td><input value="呼保义" readonly="true"/></td>
			<td><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
			<td><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
		</tr> 
		<tr>
			<td><input value="2" readonly="true"/></td>
			<td><input value="卢俊义" readonly="true"/></td>
			<td><input value="玉麒麟" readonly="true"/></td>
			<td><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
			<td><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
		</tr> 
		<tr>
			<td><input value="3" readonly="true"/></td>
			<td><input value="吴用" readonly="true"/></td>
			<td><input value="智多星" readonly="true"/></td>
			<td><a href="#" onclick='Del(this.parentNode,this.parentNode.parentNode.rowIndex)'>删除</a></td>
			<td><a href="#" onclick='edit(this.parentNode.parentNode)'>修改</a></td>
		</tr>
	</table>

	<span>排行</span><input />
	<br>
	<span>姓名</span><input />
	<br>
	<span>绰号</span><input />
	<br>
	<input 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>

总结

以上是如意编程网为你收集整理的[HTML]js动态修改表格里面的内容的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。