【随记】JQuery实现表格的双击编辑功能(自动适应表格高度和宽度)

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

九彩九色

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

阅读量973

点赞数

分类专栏： html 文章标签： jquery html table 双击编辑

本文链接：https://blog.csdn.net/u010779363/article/details/45916523

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<!-- 设定JQuery的路径 -->
<script src="../jQuery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
<!--
 $(document).ready(function(){
	 $("#tables td").dblclick(function(){
		 /*使用宽度和高度之前要保证表格已设定了宽度和高度*/
			var height=$(this).height();
			var width=$(this).width();
			
			  if($(this).children(":input").length==0){
				  $(this).html("<input type='text' style='height:"+(height-4)+"px;width: "+(width-4)+"px;' value='"+$(this).text()+"'/>");
			  }
			  $(this).children(":input").focus();

			  $(this).children(":input").blur(function(){
				   $(this).parent().html($(this).val()); 
				  });
		});
	}); 
	//-->
</script>
<style type="text/css">

tr{
	height:40px;

}
td{

	width:150px;
}

</style>

</head>

<body οnlοad="setclick()">
	<table border="1px solid black" id="tables">
		<tr >
			<td >第一行第一列</td>
			<td >第一行第二列</td>
			<td >第一行第三列</td>
			<td >第一行第四列</td>
			<td >第一行第五列</td>
		</tr>

		<tr>
			<td>第二行第一列</td>
			<td>第二行第二列</td>
			<td>第二行第三列</td>
			<td>第二行第四列</td>
			<td>第二行第五列</td>
		</tr>

		<tr>
			<td>第三行第一列</td>
			<td>第三行第二列</td>
			<td>第三行第三列</td>
			<td>第三行第四列</td>
			<td>第三行第五列</td>
		</tr>
	</table>

</body>
</html>