jquery即点即改+php原生代码展示

Posted 2020-11-18 hopelooking

show.php代码页面

<meta charset="UTF-8">
<?php
//链接数据库
$link = mysqli_connect(‘127.0.0.1‘,‘root‘,‘root‘,‘mfour‘);
//设置字符集
mysqli_query($link,‘set names utf8‘);
//拼接sql
$sql = "select * from USER ";
//执行
$res = mysqli_query($link,$sql);
//循环成一个数组
while($a = mysqli_fetch_assoc($res)){
    $data[] = $a;
}
?>
<table border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>密码</th>
        <th>手机</th>
        <th>地址</th>
    </tr>

    <?php foreach ($data as $kk => $v) { ?>
    <tr id="<?php echo $v[‘id‘]?>">
        <td fd="id"><?php echo $v[‘id‘]?></td>
        <td fd="name"><?php echo $v[‘name‘]?></td>
        <td fd="pwd"><?php echo $v[‘pwd‘]?></td>
        <td fd="phone"><?php echo $v[‘phone‘]?></td>
        <td fd="area"><?php echo $v[‘area‘]?></td>
    </tr>
    <?php } ?>
</table>

<script src="jquery.js"></script>
<script>
    //  html()  括号里面不写东西就是取值，写了东西就是替换
    //  attr  表示的是属性
    $(document).ready(function () {
        //双击定位到某一个td标签
        $("td").dblclick(function () {
            //获取td标签的内容
            var td_val = $(this).html();
            //获取td的属性值
            var fd_val = $(this).attr(‘fd‘);
            //获取tr的属性值
            var tr_val = $(this).parents().attr(‘id‘);
            //替换
            $(this).html("<input type=‘text‘ id=‘"+td_val+fd_val+"‘ value=‘"+td_val+"‘>");
            //获取文本框的内容
            $("#"+td_val+fd_val).blur(function () {
                var new_val = $(this).val();
                $(this).parents("td").html(new_val);

                //请求
                $.post("insert.php",
                    {
                        id:tr_val,  //id的值
                        fd:fd_val,  //字段的名字
                        v:new_val   //字段的值
                    },
                    function(data,status){

                    });
            })
        })
    });
</script>

 

 

php处理数据页面：insert.php

<?php
//接收值
$id = $_POST[‘id‘];
$fd = $_POST[‘fd‘];
$v = $_POST[‘v‘];

//链接数据库
$link = mysqli_connect(‘127.0.0.1‘,‘root‘,‘root‘,‘mfour‘);
//设置字符集
mysqli_query($link,‘set names utf8‘);
//拼接sql
$sql = "update user set $fd=‘$v‘ WHERE id=$id";
//执行
mysqli_query($link,$sql);