方法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>

javascript入门 之 用bootstrap-table写一个表格的更多相关文章

  1. 只有20行Javascript代码！手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  2. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  3. JavaScript写一个表格排序类

    依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...

  4. 使用bootstrap table小记（表格组件）

    前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...

  5. Bootstrap table 实现树形表格，实现联动选中，联动取消

    公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...

  6. [JavaScript] 的异步编程之手写一个Gernerator的例子

    <html> <head> <meta charset="UTF-8"> <title>Generator Demo</tit ...

  7. javascript小记四则：用JS写一个滚动横条文字，可以根据需要进行修改；

    网页上的一些广告文字,一直会滚动是怎么做到的,今天给大家演示下,非常简单,源码如下(本案例是在.net平台上,但HTML是通用的): <!DOCTYPE html> <html> ...

  8. C#索引器的应用：自已写一个表格

    C#中索引器,在一个类中有很多的同一类型成员的时候,比较适用索引器. 环境:我们假设有一个动物园,里边有很多动物. 用法: 1.先定义一个类,这是成员的类型.在这里就是要定义一个Animal类: pu ...

  9. bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

随机推荐

  1. Spark入门（三）--Spark经典的单词统计

    spark经典之单词统计 准备数据 既然要统计单词我们就需要一个包含一定数量的文本,我们这里选择了英文原著<GoneWithTheWind>(<飘>)的文本来做一个数据统计,看 ...

  2. Spark实战--搭建我们的Spark分布式架构

    Spark的分布式架构 如我们所知,spark之所以强大,除了强大的数据处理功能,另一个优势就在于良好的分布式架构.举一个例子在Spark实战--寻找5亿次访问中,访问次数最多的人中,我用四个spar ...

  3. list的常用方法

    注:lst为定义的列表变量,如:lst = [1, 2, 3, 4, 5] 增: 1.  lst.append()  末尾追加 lst = [1, 2, 3, 4, 5, 6] lst.append( ...

  4. Flask 请求中间件、错误处理、标签、过滤器、CBV

    目录 一.请求中间件 二.请求中间件额外方法(重写源码) 三.请求错误处理 四.请求标签.过滤器 五.CBV写法 基础版 常用版 一.请求中间件 中间件: 1 before_first_request ...

  5. Python习题集（十三）

    每天一习题,提升Python不是问题!!有更简洁的写法请评论告知我! https://www.cnblogs.com/poloyy/category/1676599.html 题目 写一个函数,该函数 ...

  6. Bisecting GlcNAc is a general suppressor of terminal modification of N-glycan （解读人：王茹凯）

    文献名:Bisecting GlcNAc is a general suppressor of terminal modification of N-glycan(平分GlcNAc是N-聚糖末端修饰的 ...

  7. 初识socket之TCP协议

    TCP服务端.客户端(基础版本) # 这是服务端import socket ​server = socket.socket()  # 买手机server.bind(('127.0.0.1', 8080 ...

  8. django复习 以及源码

    django请求生命周期 在浏览器上输入网址会发生什么事?(地址会朝我对应的ip地址发送get请求,get请求遵循http协议)先进入实现了wsgi协议的web服务器---->进入django- ...

  9. [Docker4] Docker-machine进行多docker host管理

    Docker Machine Docker machine就是自动化安装docker daemon Docker machine的provider docker machine provider 常见 ...

  10. 基于arduino、百度云、采用django、redis鱼缸在线监控

    大家好,今天我给大家分享一下之前做的一个鱼缸远程监控的案例,希望有人喜欢 首先给大家看一下结构框架,由于我之前买的arduino开发板不带wifi功能,所有是通过pc机转发一下上的百度云,最近我刚购买 ...