<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>
【随记】JQuery实现表格的双击编辑功能(自动适应表格高度和宽度)
最新推荐文章于 2023-03-28 14:24:57 发布