表格文章 - 即点即改

最新推荐文章于 2023-05-11 16:30:06 发布

厚积薄发的Cicci

最新推荐文章于 2023-05-11 16:30:06 发布

阅读量109

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/WuqibuHuan/article/details/110925347

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基于jQuery的即点即改，简单实用，完整的，包括发送请求！

html

<table>
    
    <tbody>
    <tr><th>IDcard</th>
    <th>Name</th>
    <th>Address</th>
    </tr><tr id="1">
        <td class="id">1</td>
        <td param="name" class="gai">袁梦坤</td>
        <td param="address" class="gai">河南省商丘市柘城县</td>
    </tr>
    <tr id="2">
        <td class="id">2</td>
        <td param="name" class="gai">刘凯歌</td>
        <td param="address" class="gai">河南省商丘市柘城县</td>
    </tr>
</tbody>
</table>

css

 td {
	border:1px solid #0094ff;
	text-align:center;
}

js（有详细的注释，新手一看就懂！）

$(function() {
    $(document).on("click", ".gai", function() {
        //不重复
        if ($(this).children("input").prop("type") == 'text') return false;
        //获取文本
        var data = $(this).html();
        //替换为文本框+文本
        var input = '<input type="text" id="ai" value="' + data + '">';
        $(this).html(input);
        //获取光标
        $(this).children("input").focus();
    });
    $(document).on("blur", "#ai", function() {
        //修改后的内容
        var data = $(this).val();
        //修改的ID
        var id = $(this).parents("tr").prop("id");
        //修改的字段
        var param = $(this).parent().attr("param");
        alert("修改的ID：" + id + "|" + "修改的字段：" + param + "|" + "修改后的内容：" + data);
        var obj = $(this);
        //发送AJAX
        // $.ajax({
        //     type:"post",
        //     url:"",
        //     data:{
        //         "data":data,
        //         "id":id,
        //         "param":param
        //     },
        //     success:function(data){
        //         if(data==1){
        obj.parent().html(data);
        //       }
        //   }
        //})
    })
})