表格文章 - 即点即改-白红宇

表格文章 - 即点即改

阅读量：581 次

发布时间：2019-03-11

本文共 1353 字，大约阅读时间需要 4 分钟。

基于jQuery的即点即改功能实现，简单而实用，功能完整且支持发送请求。以下将从HTML、CSS和JavaScript三个方面详细说明实现过程。


   
   
   
**
   
基于jQuery的即点即改，简单实用，完整的，包括发送请求！
   
**
   
**
   
html
   
**
   
    
                        IDcard        Name        Address       
                       1              袁梦坤              河南省商丘市柘城县           
                       2              刘凯歌              河南省商丘市柘城县           
       
    
   
**
   
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 = '';    $(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);    //发送AJAX请求    $.ajax({      type: "post",      url: "",      data: {        "data": data,        "id": id,        "param": param      },      success: function(data) {        if (data == 1) {          obj.parent().html(data);        }      }    });  });});