基本的即点即改,可以参考,理解的使用

本文链接：https://blog.youkuaiyun.com/King_XiaoBlog/article/details/52799612

本文展示了一个使用PHP实现的商品列表管理界面，该界面允许管理员进行商品数据的增删改查等操作，并支持批量删除功能。此外，还实现了表格中商品名称的即点即改功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="/js/jq.js"></script>
</head>
<body>
<center>
    <tr>
        <td><a href="goodsAdd">插入数据</a></td>
        <a href="log">操作日志查看</a>
    </tr>
    <table border="1">
        <tr>
            <th></th>
            <th>名称</th>
            <th>价格</th>
            <th>凑要走</th>
        </tr>

            <?php foreach($list as $v):?>
            <tr>
                <td><input type="checkbox" value="<?php echo $v->g_id?>" id="chk" name="checkbox" checked="checked"></td>
                <td><span class="click" data-filter="name" data-id="<?php echo $v->g_id?>" ><?php echo $v->g_name?></span></td>
                <td><?php echo $v->g_price?></td>
                <td><a href="goodsDel?id=<?php echo $v->g_id?>">删除</a>||
                </td>
            </tr>
            <?php endforeach;?>

    </table>
    <tr>
        <td><input type="button" value="批量删除" id="del"></td>
    </tr>
</center>
</body>
</html>
<script>
 /* $('#box').click(function(){
      var id=$(this).val();
      alert(id)
  })*/
 $("document").ready(function(){
     var checked = [];
     $("#del").click(function(){
         $('input:checkbox:checked').each(function() {
             checked.push($(this).val());
         });
         //alert(checked);
         $.get('allDel',{ids:checked},function(msg){
             location.href='goodsList';
         })
     })
//即点即改
     $(".click").click(function() {
         var td = $(this);
         var txt = td.text();
         var input = $("<input type='text'value='" + txt + "'/>");
         td.html(input);
         input.click(function () {
             return false;
         });
//获取焦点
         input.trigger("focus");
//文本框失去焦点后提交内容，重新变为文本
         input.blur(function () {
             var newtxt = $(this).val();
//判断文本有没有修改
             if (newtxt != txt) {
                 td.html(newtxt);
                 $.get('upte',{name:newtxt},function(msg){
                     alert(msg)
                 });
             }
         })
     })
     })

</script>