代码改变世界

HTML 和JS,PHP混合编程示例 获取点击的td的值

2023-06-05 10:29  花无缺Andyi  阅读(36)  评论(0编辑  收藏  举报

首先在需要获取值的 td 中加入onclick方法

<table class="layui-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>真实姓名</th>
                <th>角色</th>
                <th>状态</th>
                <th>添加时间</th>
                <th>最后登录时间</th>
                <th>登录次数</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        <tr></tr>
        {volist id="vo" name="data.lists"}
            <tr>
                <td>{$vo.id}</td>
                <td>{$vo.username}</td>
                <td>{$vo.truename}</td>
                <td>{:isset($data['groups'][$vo.gid]) ? $data['groups'][$vo.gid]['title'] : '' }</td>
                <td  onclick="change(this,'{$vo.id}')">{$vo.status==0?'正常':'<span style="color:red;">禁用</span>'}</td>
                <td>{:date('Y-m-d H:i:s',$vo.add_time)}</td>
                <td>{:date('Y-m-d H:i:s',$vo.last_time)}</td>
                <td>{$vo.login_count}</td>
                <td>
                    <button class="layui-btn layui-btn-xs" onclick="add({$vo.id})">编辑</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del({$vo.id})">删除</button>
                </td>
            </tr>
        {/volist}
        </tbody>
    </table>

然后添加具体方法 获取td的值并传到php ,执行成功后刷新页面

function change(obj,id) {
        var status = $(obj).text();
        if(status == '正常'){
           var mess = '禁用';
        }
        else{
           var mess = '启用';
        }
        
        layer.confirm('是否'+mess, {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.post('{:url("admin/change")}',{'id':id,'status':status},function (res) {
                if(res.code>0){
                    layer.alert(mess+res.msg,{icon:2});
                }
                else{
                    layer.msg(mess+res.msg, {icon: 1});
                    setTimeout(function (){window.location.reload();},1000);
                }
            },'json');
        });
    }

后台处理

 

public function change()
    {
        $id = (int)input('post.id');
        //接收td的值
        $statusText = trim(input('post.status'));
        if ($statusText == '正常'){
            $data['status'] = 1;
        }
        else{
            $data['status'] = 0;
        }
        $res = $this->db->table('admins')->where(array('id'=>$id))->update($data);
        if(!$res){
            exit(json_encode(array('code'=>1,'msg'=>'失败')));
        }
        exit(json_encode(array('code'=>0 , 'msg'=>'成功')));
    }

 

需要引用2个js脚本

<script type="text/javascript" src="script/jquery-1.9.1.js"></script>
<script type="text/javascript" src="script/layer.js"></script>

如果没有 可以到官网上去下载即可。