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>
  • 相关阅读:
    礼品卡导入可用
    mysql
    初级运维工程师面试题总结
    mysql聚合函数
    去任何一个公司的思想
    mysql数据库引擎
    导入MyEclipse项目乱码
    poj 1743 后缀数组 求最长不重叠重复子串
    hdu 1011 树形dp+背包
    poj 2342 && hdu 1520 树形dp
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700665.html
Copyright © 2011-2022 走看看