表格内增删改查

html页面仅id为table 的表格

js

    $(function(){
        ajaxEvent();//查找数据并打印到表格
    })
    //查找数据，成功后执行chuliData（）处理数据
    function ajaxEvent(){
        $.ajax({
            type:"post",
            url:"chuli.php",
            data:{type:'selectData'},
            dataType:'json',
            success:function(data){
                chuliData(data);
            }
        });
    }
    //处理查到的数据，循环添加表格的单元格，并在最后加入编辑和删除按钮
    function chuliData(data){
        var str = `<tr>
                    <th width='10%'>学号</th>
                    <th width='15%'>姓名</th>
                    <th width='10%'>性别</th>
                    <th width='30%'>生日</th>
                    <th width='15%'>班级</th>
                    <th width='20%'><button class='btn' onclick='add()'>添加</button></th>
                </tr>`;
        for(var i = 0; i < data.length; i++){
            str += "<tr>";
            for(var j = 0; j <data[i].length; j++){
                str += "<td>"+data[i][j]+"</td>";
            }
            str += "<td><button onclick='revise(this)' class='btn btn-primary btn-sm'>编辑</button><button onclick='del("+data[i][0]+")' class='btn btn-primary btn-sm'>删除</button></td>"
            str += "</tr>";
        }
        $('#table').html(str);
    }
    //添加一行的函数
    function add(){
        var str ="";
        //添加一行，单元格内为input，最后添加保存和取消按钮均传入this代表选中的这个按钮
        str += `<tr>
                <td><input type='text' /></td>
                <td><input type='text' /></td>
                <td><input type='text' /></td>
                <td><input type='text' /></td>
                <td><input type='text' /></td>
                <td>
                    <button onclick='save(this)'>保存</button>
                    <button onclick='qx(this)'>取消</button>
                </td>
            </tr>`;
        $('#table').append(str);
    }
    //添加一行的取消按钮
    function qx(obj){
        //此按钮的父级单元格，再父级行，删除。
        $(obj).parent().parent().remove();
    }
    //保存按钮，默认传参zt=1，当默认为1时为添加一行的保存，修改数据的编辑的保存按钮传参为2
    function save(obj,zt=1){
        //定义传入后台的标志
        var flag;
        //定义行，按钮的父级单元格的父级行
        var hang = $(obj).parent().parent();
        //定义数组，用来保存拿到的input的值
        var inpVal = [];
        //找到行内所有的input并把value添加到数组
        hang.find('input').each(function(){
            inpVal.push($(this).val());
        })
        //zt=1时，标志改为添加一行的保存，zt=2时标志改为编辑的保存
        if(zt == 1){
            flag = 'save';    
        }else if(zt == 2){
            flag = 'updateData';
        }
        //传入后台数组和标志，执行成功后重新加载页面表格函数
        $.ajax({
            type:"post",
            url:"chuli.php",
            data:{type:'save',inpVal:inpVal,flag:flag},
            dataType:'text',
            success:function(data){
                if(data == 'ok') ajaxEvent();
            }
        });
    }
    //编辑按钮函数，拿到后台的值赋给input
    function revise(obj){
        var str ="";
        var hang = $(obj).parent().parent();
        var inpVal = [];
        //遍历此行的单元格并把值赋给数组
        hang.find('td').each(function(){
            inpVal.push($(this).html());
        })
        //循环创建input并把数组的值赋给value
        for(var i = 0; i < 5; i++){
            str +="<td><input type='text' value='"+inpVal[i]+"' /></td>";
        }
        str += `<td>
                    <button onclick='save(this,2)'>保存</button>
                    <button id='btn_qx'>取消</button>
                </td>`
        //改变此行的内容
        hang.replaceWith(str);
        //编辑的取消，重新加载页面显示函数
        $('#btn_qx').click(function(){
            ajaxEvent();
        })
    }
    //删除函数，拿到这一行的主键传入后台，删除数据库，重新加载页面
    function del(id){
        $.ajax({
            type:"post",
            url:"chuli.php",
            data:{
                type:'del',
                id:id
            },
            dataType:'text',
            success:function(data){
                if(data == 'ok') ajaxEvent();
            }
        });
    }

php

    $db = new MySQLi('localhost','root','1','school');
    !mysqli_connect_error() or die ('连接错误');
    $db->query('set names utf8');
    
    $type = $_POST['type'];
    switch($type){
        //加载页面数据，查找所有的内容传给前台
        case 'selectData':
            $sql = "select * from student";
            $res = $db->query($sql);
            $attr = $res->fetch_all();
            echo json_encode($attr);
        break;
        //保存按钮，拿到所有数据，判断是添加还是修改
        case 'save':
            $inpVal = $_POST['inpVal'];
            $flag = $_POST['flag'];
            if($flag == 'updateData'){
                $sql = "update student set sno='{$inpVal[0]}',sname='{$inpVal[1]}',ssex='{$inpVal[2]}',sbirthday='{$inpVal[3]}',class='{$inpVal[4]}' where sno = '{$inpVal[0]}'";
            }else{
                $sql = "insert into student(sno,sname,ssex,sbirthday,class) values('{$inpVal[0]}','{$inpVal[1]}','{$inpVal[2]}','{$inpVal[3]}','{$inpVal[4]}')";
            }
            $res = $db->query($sql);
            if($res) echo 'ok';
        break;
        //删除数据，拿到主键。
        case 'del':
            $id = $_POST['id'];
            $sql = "delete from student where sno = '$id'";
            $res = $db->query($sql);
            if($res) echo 'ok';
        break;
    }

新方法：

　　replaceWith() 方法把被选元素替换为新的内容。