JQuery 表格td双击可编辑

JQuery 表格td双击可编辑

---

版本说明：jquery V3.5.1、Bootstrap V5.0.0

---

双击编辑的原理: JS监听到双击事件后，获取当前元素(td)的InnerText，然后将它放到一个input中再塞回td。input失去焦点后，再将修改后的值塞回到td就可以了。

代码：

HTML:

<table class="table">
  <thead>
    <tr>
      <th class="cell">姓名</th>
      <th class="cell">电话</th>
      <th class="cell">省份</th>
      <th class="cell">城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--    支持双击修改的td，包含类名db-click-->
      <td class="cell db-click">ABC</td>
      <td class="cell db-click">12345678910</td>
      <td class="cell db-click">江苏</td>
      <td class="cell db-click">徐州</td>
    </tr>
  </tbody>
</table>

JS:

// 监听双击事件
$('.db-click').dblclick(function () {
    
    
	// 获取原值，同时去除空格回车
    let old_val = $(this).html().replace(/\s/g,"");

    // 给td塞进去一个input
    $(this).html("<input type='text' class='form-control db-input' value=" + old_val + " />");
	
	// 将光标移到input尾部，但是函数是在失焦时执行	
    $('.db-input').val('').focus().val(old_val).blur(function () {
    
    
    	// 获取当前值
        let new_val = $(this).val();

        // 将新值塞回到当前元素的父元素中
        $(this).parent().html(new_val);

        // 将修改后的结果提交到数据库
    })
})

注意最后需要将修改后的结果提交到数据库，这个需要在dbclick的回调函数中获取当前记录的id，然后用ajax提交到数据库就OK。