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>
  • 相关阅读:
    FPGA 在线调试方法概述
    Quartus II& Nios II 出错解决办法
    Verilog HDL--VGA显示
    常用电平转换方案
    Verilog HDL SPI通信——读
    Verilog HDL SPI通信——写
    Verilog HDL串口发送程序
    verilog HDL 串口接受程序
    关于AFNetworking中header的bug问题
    iOS项目的本地化处理(多国语言)
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700665.html
Copyright © 2011-2022 走看看