双击table的td进行编辑

最新推荐文章于 2026-04-12 18:06:56 发布

原创最新推荐文章于 2026-04-12 18:06:56 发布 · 2.7k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这篇博客介绍如何在动态生成的HTML表格中，通过JavaScript实现单元格（TD）的双击编辑功能，适用于AJAX加载的数据展示。

由于table是ajax拼接的，所以就写了个table的头出来，方便看一下

$('#tb_list').on('dblclick', 'td', function () {
    var oldVal = $(this).text();
    var input = "<input type='text' id='tmpId' value='" + oldVal + "' >";
    $(this).text('');
    $(this).append(input);
    $('#tmpId').focus();
    $('#tmpId').blur(function(){
        if($(this).val() != ''){
        oldVal = $(this).val();
        }
        //closest：是从当前元素开始，沿Dom树向上遍历直到找到已应用选择器的一个匹配为止。
        $(this).closest('td').text(oldVal);
    });
});


<table id="tb_list">
   <tr>
       <th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>合计</th>
   </tr>
</table>