php 原生即点即改

最新推荐文章于 2021-03-20 17:37:50 发布

萧-青

最新推荐文章于 2021-03-20 17:37:50 发布

阅读量539

点赞数

CC 4.0 BY-SA版权

分类专栏： php

本文链接：https://blog.youkuaiyun.com/qq_39131177/article/details/80050538

php 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个基于原生HTML、CSS和JavaScript的前端页面设计方案，该方案支持用户直接在表格中编辑数据，并通过AJAX与PHP后端进行交互以实现数据的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生的前端页面，可以支持同时修改多个字段

<?php
header("content-type:text/html;charset=utf-8");
$dsn = "mysql:host=localhost;dbname=case";
$pdo = new PDO($dsn, 'root', 'root');
$pdo->query("set names utf8");

$search = isset($_POST['search'])?$_POST['search']:null;
$sql='select * from san';
$data=$pdo->query($sql);

?>

<table border="1">
<input type="text" class="num"><input type="button" value="搜索" class="search">
<th>边长1</th>
<th>边长2</th>
<th>斜边</th>
<th>周长</th>
<th>面积</th>
<tbody class="div">
<?php foreach($data as $k=>$v) {?>

<tr>
    <td alt="lefts"><span class="span-left"><?php echo $v['lefts'] ?></span><input type="hidden" class="input-left" data-id="<?php echo $v['id'] ?>"></td>
    <td alt="rights"><span class="span-left"><?php echo $v['rights']?></span><input type="hidden" class="input-left" data-id="<?php echo $v['id'] ?>"></td>
    <td><?php echo $v['beve'] ?></td>
    <td><?php echo $v['zhou'] ?></td>
    <td><?php echo $v['mian'] ?></td>
</tr>
<?php }?>

</tbody>
<a href="list.php">返回计算</a>
</table>
<script src="./jq.js"></script>
<script>

$('.span-left').click(function(){
    var left = $(this).text();
    $(this).hide();
    $(this).next().prop('type','text').focus().val(left);
});

$('.input-left').blur(function(){

    var obj = $(this);
    var left = obj.val();
    var id = obj.data('id');
    var zi = obj.parent().attr("alt");

    var old_left = obj.prev().text();
    if(left == old_left)
    {
       obj.prop('type','hidden');
       obj.prev().show();
       return false;
    }
    $.ajax({
      type:'get',
      url:'ajax.php',
      data:{left:left,id:id,zi:zi},

      success:function(result)
      {
         if(result == 0)
         {
            alert('修改失败');
            return false;
         }
         obj.prop('type','hidden');
         obj.prev().text(left).show();
      }
    });
});

php 后端接收页面

<?php
header("content-type:text/html;charset=utf-8");
$dsn = "mysql:host=localhost;dbname=case";
$pdo = new PDO($dsn, 'root', 'root');
$pdo->query("set names utf8");
$zi = $_GET['zi'];
$left=$_GET['left'];
$id = $_GET['id'];
$sql = "update san set $zi=$left where id=$id";
$bloon = $pdo->exec($sql);
if($bloon)
{
echo 1;
}
else
{
echo 0;
}

?>