HTML表格和文本框

我想利用HTML+CSS+JS实现一个这样的功能：有一个表格，每行后面有个修改按钮，点击修改按钮后，此时修改按钮变成了保存按钮，该行的内容就变成可编辑的文本，可随意编辑。... 我想利用HTML+CSS+JS实现一个这样的功能：
有一个表格，每行后面有个修改按钮，点击修改按钮后，此时修改按钮变成了保存按钮，该行的内容就变成可编辑的文本，可随意编辑。然后点击保存按钮，可编辑的文本框又变回原来的表格模样。
求大神指点！！！展开

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

momo1938
2014-12-22 · TA获得超过224个赞

知道小有建树答主

回答量：293

采纳率：100%

帮助的人：213万

我也去答题访问个人页

关注

展开全部

<td>标签里面同时包含<input>和 <div>,在非编辑状态下，薯谨显示div，隐藏input,单击编辑之源带后把div隐藏，显示雹手芦input.

追问

具体怎么做，求举个例。

追答

<html>
	<head>
		<title>test</title>
	</head>
	<script type="text/javascript">
	function test(td){
		if(td.innerHTML == "编辑"){
			td.innerHTML = '保存';
			document.getElementById('div').style.display = "none";
			document.getElementById("edit").style.display = "";
		}else{
			td.innerHTML = '编辑';
			document.getElementById('div').value = document.getElementById('input').value;
			document.getElementById('div').style.display = "";
			document.getElementById("edit").style.display = "none";
		}
	}
	</script>
	<body>
		<table border="1">
			<tr>
				<td>
					<div id="div" style="width:180px;">123</div>
					<input id="edit" value="" style="display:none;" />
				</td>
				<td onclick="test(this);">编辑</td>
			</tr>
		</table>
	</body>
</html>