jQuery表格内容编辑

浏览：686次- 评论：0次- 发布时间：2018-01-11

Html

Css


    双击单元格，实现内容编辑功能
    
        
            id
            姓名
            年龄
            住址
        
    
    
        
            1
            张三
            18
            广州
        
        
            2
            张三
            20
            天河
        
        
            3
            张三
            30
            广州
        
        
            4
            李四
            25
            白云

双击单元格，实现内容编辑功能
id	姓名	年龄	住址
1	张三	18	广州
2	张三	20	天河
3	张三	30	广州
4	李四	25	白云

})
        $('#clean').click(function() {
            that.empty();
            that.html(txt);
        })
    });
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.1

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：使用jQuery实现表格单元格双击编辑功能

主要原理：

1、找到td，然后绑定双击事件

2、把之前的文本内容保存起来，然后再清空之前的内容，再追加input元素，保存，取消按钮

3、给保存取消按钮绑定事件，（注意这里，会触发冒泡事件，所以要阻止冒泡事件）

4、我这里设置了一个num变量，目的是在表格编辑时只能有一个TD是可编辑的，不能同时出现多个！

PS：保存按钮提交数据时的路径只是一个参考！使用时换成你自己的接口就行了！

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取