zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    网页中嵌入百度地图
    第一篇博客, 感谢博客园
    Flask-Migrate插件
    基于airtest-selenium的UI自动化测试
    自动化测试中如何解决图片验证码问题
    Linux下搭建自动化测试环境
    python3中使用subprocess模块执行外部命令
    微信小程序自动化实战(一)
    python3中使用objectpath模块处理Json对象
    Pytest中如何解决测试用例的依赖执行问题
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700665.html
Copyright © 2011-2022 走看看