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>
  • 相关阅读:
    20190710-汉诺塔算法
    20190705-Python数据驱动之DDT
    20190621-N皇后
    还在为Excel合并单元格导致的各种问题烦恼吗?这里一起解决
    Excel基础:开始菜单之对齐方式,那些被遗忘的实用功能
    Excel中身份证号码如何分段显示,难倒小编,有什么好方法吗?
    制作这样的Excel注水图表,让老板另眼相看,坐等升职加薪
    Excel高手都会的Shift快捷键7个用法,让工作效率翻倍
    Excel答粉丝问:批量将单元格内容转为批注
    Excel基础:开始菜单之字体的华丽转身
  • 原文地址:https://www.cnblogs.com/viplanyue/p/12700665.html
Copyright © 2011-2022 走看看