• javascript入门 之 用bootstrap-table写一个表格


    方法1(对普通的 table 设置 data-toggle="table" 即可):

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta lang="zh"/>
        <title>select2</title>
        <script src="js/jquery-3.3.1.js"></script>
        <link href="css/select2.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-table.css">
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-table.js"></script>
        <script src="js/select2.js"></script>
    
        <script type="text/javascript">
        </script>
    </head>
    <body>
    
    <div>
        <table data-toggle="table">
            <thead>
            <tr>
                <th>Item ID</th>
                <th>Item 名称</th>
                <th>Item 价格</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>电脑</td>
                <td>$1000</td>
            </tr>
            <tr>
                <td>2</td>
                <td>冰箱</td>
                <td>$500</td>
            </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>

    2.方法2(javascript):

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta lang="zh"/>
        <title>select2</title>
        <script src="js/jquery-3.3.1.js"></script>
        <link href="css/select2.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-table.css">
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-table.js"></script>
        <script src="js/select2.js"></script>
    
        <script type="text/javascript">
        </script>
    </head>
    <body>
    
    <div>
        <table id = "demo">
        </table>
    </div>
    
    <script type="text/javascript">
    
        $('#demo').bootstrapTable({
            columns: [{
                field: 'id',
                title: 'ID'
            }, {
                field: 'name',
                title: '商品'
            }, {
                field: 'price',
                title: '价格'
            }],
            data: [{
                id: 1,
                name: '电脑',
                price: '$1000'
            }, {
                id: 2,
                name: '冰箱',
                price: '$500'
            }]
        });
    
    </script>
    </body>
    </html>

    3.远程:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"/>
        <meta lang="zh"/>
        <title>select2</title>
        <script src="js/jquery-3.3.1.js"></script>
        <link href="css/select2.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-table.css">
        <script src="js/bootstrap.min.js"></script>
        <script src="js/bootstrap-table.js"></script>
        <script src="js/select2.js"></script>
    
        <script type="text/javascript">
        </script>
    </head>
    <body>
    
    <div>
        <table data-toggle="table" data-url="data1.json">
            <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="name">商品</th>
                <th data-field="price">价格</th>
            </tr>
            </thead>
        </table>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    Nubiers to follow
    pp to write
    Reading source code
    build opencv with python support
    add monitor resolution
    Install cv2.so for Anaconda
    axios 上传下载显示进度
    vant 上传图片 图片回显 是base64
    多个时间段 合并
    热部署
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700665.html
Copyright © 2020-2023  润新知