html点击页面列表中展示数据，修改并保存到数据库

2022年7月1日 199次阅读 来源: 临沂码农王老七

《html点击页面列表中展示数据，修改并保存到数据库》

点击某一条记录中的页码，填入新的值，鼠标离开后将最新数据更新到数据库

前端代码：

<table class="table table-border table-bordered table-bg">
                <thead>
                <tr>
                    <th scope="col" colspan="14">杂志图片列表</th>
                </tr>
                <tr class="text-c">
                    <th width="25"><input type="checkbox" name="dellist" value=""></th>
                    <th width="40">ID</th>
                    <th width="90">页码</th>
                    <th width="90">描述</th>
                    <th width="150">更新时间</th>
                </tr>
                </thead>
                <tbody>
                {volist name="lists" id="mi" empty="暂无数据"}
                <tr class="text-c">
                    <td><input type="checkbox" value="{$mi.id}" name=""></td>
                    <td>{$mi.id}</td>
                    <td>
                        <input style="width: 50px;" name="pagenum" id="pagenum{$mi.id}" miid="{$mi.id}" onclick="setid('{$mi.id}')" value="{$mi.page_num}">
                    </td>
                    <td>
                        {$mi.dis}
                    </td>
                    <td> {$mi.create_time}</td>
                </tr>
                {/volist}
                </tbody>
</table>
<input type="hidden" value="" id="pagenum"/>

js代码：

<script type="text/javascript">
   
    function setid(id){
        $('#pagenum').val("pagenum"+id);
    }
    $(function(){
        $('input[name=pagenum]').change(function(){
            var id = $('#pagenum').val();
            var values = $('#'+id).val();
            var miid = $('#'+id).attr('miid');
            layer.confirm('确认要修改吗?',function(index){
                //此处请求后台程序，下方是成功后的前台处理……
                $.ajax({
                    type: "GET",
                    url: "{:url('changeNum')}",
                    data: {page_num:values,id:miid},
                    dataType: "json",
                    async: false,
                    success: function (res) {
                        if(res.status==1){
                            layer.msg(res.msg,{icon:1,time:2000});
                        }else{
                            layer.msg(res.msg,{icon:1,time:2000});
                        }
                    }
                });
            });
        });
    })

</script>

    原文作者：临沂码农王老七
    原文地址: https://blog.csdn.net/u010991531/article/details/122647500
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞