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

来源：互联网发布：线切割hl编程视频教程编辑：程序博客网时间：2024/05/21 00:47

<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 onload="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>

0 0