jquery 双击表格单元格编辑输入

最新推荐文章于 2023-03-28 14:24:57 发布

原创最新推荐文章于 2023-03-28 14:24:57 发布 · 480 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的双击编辑表格单元格的方法。当用户双击表格中的某个单元格时，该单元格将变为可编辑状态，允许用户直接修改其内容。完成编辑后，单元格会恢复到显示模式并保存更改。

	 	$("#table").find("td").bind("dblclick",function(){
	 		var input ="<input type='text' id='temp' value="+$(this).text()+" >";
	 		$(this).text("");
	 		$(this).append(input);
	 		$("input#temp").focus();
	 		$("input").blur(function(){
	 			if($(this).val()==""){
	 				$(this).remove();
	 			}else{
	 				$(this).closest("td").text($(this).val());
	 			}
	 		});

   	<table border="1" width="200" id="table">
		<tr><td>111</td></tr>
		<tr><td>222</td></tr>
		<tr><td>333</td></tr>
		<tr><td>444</td></tr>
		<tr><td>555</td></tr>
 	</table>