jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

首先需要明确，实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法，需要使用以下三个步骤：

1. 监听鼠标双击事件，双击后将Table单元格变成可编辑的文本框。
2. 在文本框中输入内容后，监听文本框的失焦事件，将文本框中的内容更新到对应的数据库中。
3. 在更新数据库成功后，将文本框变成Table单元格。

下面是具体的实现攻略：

1. 监听鼠标双击事件

在HTML的Table中，每个单元格对应一个td标签。首先需要给每个td标签添加双击事件的监听，并在监听函数中将td中的内容转换成文本框。

$('td').dblclick(function(){
   // 取得td中的文本内容
   var td_text = $(this).text();
   // 将td中的文本替换为文本框
   $(this).html('<input type="text" value="' + td_text + '">');
});

2. 监听文本框的失焦事件

在文本框中输入内容后，还需要监听文本框的失焦事件，将文本框中的内容更新到对应的数据库中。

$('td').on('blur', 'input[type="text"]', function(){
   var new_text = $(this).val();
   var td = $(this).parent();
   // 更新数据库中的内容到new_text
   $.post('update.php', { 
       new_text: new_text, 
       row: td.parent().index(), 
       col: td.index() 
   }, function(data){
       // 更新成功后将文本框变成Table单元格
       td.text(new_text);
   });
});

上面的代码中，我们利用了jQuery的事件委托机制，对更新前的文本框段落进行事件监听。失去焦点后，我们取得文本框中的值，然后通过AJAX方式将新值传递到后端处理。update.php将根据传递的行/列值更新对应表格数据，更新成功后，回调函数会将新值渲染到页面，并将文本框变成Table单元格，完成一次单元格到数据到双击修改数据到更新数据库并渲染数据的完整循环流程。

示例说明

1. 双击单元格变成文本框并修改数据

通过上述代码，我们就已经完成了“双击Table单元格变成文本框及输入内容后更新到数据库的方法”的前两步。使用以下示例代码演示：

<table>
    <tr>
        <td>第一列第一行</td>
        <td>第二列第一行</td>
    </tr>
    <tr>
        <td>第一列第二行</td>
        <td>第二列第二行</td>
    </tr>
</table>

$('td').dblclick(function(){
   var td_text = $(this).text();
   $(this).html('<input type="text" value="' + td_text + '">');
});

$('td').on('blur', 'input[type="text"]', function(){
   var new_text = $(this).val();
   var td = $(this).parent();
   $.post('update.php', { 
       new_text: new_text, 
       row: td.parent().index(), 
       col: td.index() 
   }, function(data){
       td.text(new_text);
   });
});

1. 更新数据库成功后，将文本框变成Table单元格

在上述代码中，我们已经对成功更新了数据库的文本框，将其变成Table单元格完成了实现方法中的第三步。该步骤是位于AJAX回调函数中的，不过在此还是把所有代码整理到一起演示：

$('td').on('blur', 'input[type="text"]', function(){
   var new_text = $(this).val();
   var td = $(this).parent();
   $.post('update.php', { 
       new_text: new_text, 
       row: td.parent().index(), 
       col: td.index() 
   }, function(data){
       td.text(new_text);
   });
});

注意，上面的代码中监听的是文本框的失焦事件，而不是确认按钮事件，这是因为失去焦点时会自动提交数据，而且用户不需要点击确认按钮即可完成修改数据的操作。