方法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. 通过locust进行性能测试

    首先我们需要准备好python环境 接口 安装python 插件 locust,网上有很多文章而且都很错,这里不再赘述 我是通过pycharm 编写的代码  导入 HttpLocust,TaskSet ...

  2. 如何查看子线程中的GC Alloc

    1)如何查看子线程中的GC Alloc2)Build时,提示安卓NDK异常3)如何获得ParticleSystem产生的三角形数量4)关于图片通道的问题5)GPUSkinning导致模型动画不平滑 M ...

  3. 奇思妙想-java实现另类的pipeline模式

    磕叨 在公司做项目是见到前辈们写的一端任务链的代码,大概如下 Runnable task = new TaskA(new TaskB(new TaskC(new taskD()))); task.ru ...

  4. Jenkins+Ant+JMeter报告自动化

    1.参考Jenkins+Ant+JMeter集成,安装Jenkins(不需要安装Performance Plugin插件),建立Slave节点,连接Slave节点,创建任务等. 2.将Jenkins+ ...

  5. MySQL笔记（6）-- SQL更新语句日志系统流程

    一.背景 在上一篇[MySQL笔记(5)-- SQL执行流程,MySQL体系结构]中讲述了select查询语句在MySQL体系中的运行流程,从连接器开始,到分析器.优化器.执行器等,最后到达存储引擎. ...

  6. 几十万学费总结出来的Ddos攻击防护经验！

    本人从事网络安全行业十余年年.有十年被骗经验.被骗了很多回(都说能防300G,500G,买完就防不住了),本文当然重点给大家说明,ddos攻击是什么,中小企业如何防护,用到成本等. 言归正传 首先我们 ...

  7. 【原创】基于RBI的性能测试理念，通过jmeter快速定位接口最大并发用户数

    测试工具:jmeter v_5.2 测试对象:某网站的物料获取接口,需登录后操作 测试目的:快速定位该接口最大并发用户数 思路&步骤: 1.模拟一个场景,某天临近下班,主管突然过来让你测下你们 ...

  8. Building Applications with Force.com and VisualForce(Dev401)( 八):Designing Applications for Multiple Users: Controling Access to Records.

    Module Objectives1.List feature that affect access to data at the record level.2.List the organizati ...

  9. [leetcode] 位操作题解-2

    本文是 leetcode 位操作题库的题目解析.点击每个标题可进入题目页面. 重复的DNA序列 题目:所有 DNA 都由一系列缩写为 A,C,G 和 T 的核苷酸组成,例如:"ACGAATT ...

  10. 在Windows中安装OpenCV-Python |四

    目标 在本教程中 我们将学习在你的Windows系统中设置OpenCV-Python. 下面的步骤在装有Visual Studio 2010和Visual Studio 2012的Windows 7- ...