亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

統(tǒng)計表格界面

original 2019-03-12 14:50:51 258
abstrait:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" h
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
<title>管理員列表</title>
<style>
    .header{border-bottom:2px solid RGB(0,150,136);}
    .header span{
        background:RGB(0,150,136); 
        color:#fff;padding: 10px;
        margin-left: 10px; 
        line-height:32px;
    }
    .header button{
        background:RGB(0,150,136); 
        color:#fff; float:right;
    }
    </style>
</head>
<body style="padding: 10px;">
    <!-- 頁眉 -->
    <div class="header">
        <span>管理員列表</span>
        <button class="layui-btn layui-btn-primary layui-btn-sm">添加</button>
    </div>
    <!-- 插入數(shù)據(jù)操作的表格 -->
    <table class="layui-table">
        <thead>
            <tr>
                <th >ID</th>
                <th>用戶名</th>
                <th>性別</th>
                <th>城市</th>
                <th>簽名</th>
                <th>積分</th>
                <th>操作</th>      
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>賢心</td>
                <td>漢族</td>
                <td>1989-10-14</td>
                <td>北京</td>
                <td>漢朝</td>
                <td>32232323</td>
                <td>
                    <button class="layui-btn layui-btn-xs" >編輯</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">刪除</button>
                </td>
            </tr>
            <tr>
                <td>張愛玲</td>
                <td>漢族</td>
                <td>1989-10-14</td>
                <td>北京</td>
                <td>漢朝</td>
                <td>32232323</td>
                <td>
                    <button class="layui-btn layui-btn-xs" >編輯</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs">刪除</button>
                </td>
            </tr>
            <tr>
                <td>Helen Keller</td>
                <td>漢族</td>
                <td>1989-10-14</td>
                <td>北京</td>
                <td>漢朝</td>
                <td>32232323</td>
                <td>
                    <button class="layui-btn layui-btn-xs" >編輯</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs">刪除</button>
                    </td>
            </tr>
            <tr>
                    <td>岳飛</td>
                    <td>漢族</td>
                    <td>1989-10-14</td>
                    <td>北京</td>
                    <td>漢朝</td>
                    <td>32232323</td>
                    <td>
                        <button class="layui-btn layui-btn-xs" >編輯</button>
                        <button class="layui-btn layui-btn-danger layui-btn-xs">刪除</button>
                    </td>
            </tr>
            <tr>
                    <td>孟子</td>
                    <td>漢族</td>
                    <td>1989-10-14</td>
                    <td>北京</td>
                    <td>漢朝</td>
                    <td>32232323</td>
                    <td>
                        <button class="layui-btn layui-btn-xs" >編輯</button>
                        <button class="layui-btn layui-btn-danger layui-btn-xs">刪除</button>
                        </td>
                    </tr>
        </tbody>
    </table>
<script>
    //layui.use定義js外部引用函數(shù)
    layui.use([ 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
    });
    //刪除
    function del(){
        layer.confirm('確定要刪除嗎', {
            icon:2,                        //圖標0-6
            btn: ['確定', '取消'] //可以無限個按鈕
        }, function(index, layero){
            //按鈕【按鈕一】的回調
            }, function(index){
            //按鈕【按鈕二】的回調
            });
    }
</script>
</body>
</html>


Professeur correcteur:韋小寶Temps de correction:2019-03-12 16:02:12
Résumé du professeur:寫的很不錯 使用layui來實現(xiàn)表格還是比較簡單的 但是千萬不要以為layui中的表格樣式是死的哦 layui中的表格也是比較靈活的 但是要去研究研究才能掌握

Notes de version

Entrées populaires