【隨記】JQuery實現表格的雙擊編輯功能(自動適應表格高度和寬度)
阿新 • • 發佈：2019-01-31
<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>