方法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. webpack，Babel，babel-loader的关系

    本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...

  2. git版本控制系统小白教程（上）

    前言:本文主要介绍git版本控制系统的一些基础使用,适合小白入门,因为内容较多,会分为两部分进行分享. Git介绍 ​ Git是目前世界上最先进的分布式版本控制系统.并且它是一个开源的分布式版本控制系 ...

  3. DVWA Command Injection 解析

    命令注入,即 Command Injection.是指通过提交恶意构造的参数破坏命令语句结构,从而达到执行恶意命令的目的. 在Web应用中,有时候会用到一些命令执行的函数,如php中system.ex ...

  4. Alterations of brain quantitative proteomics profiling revealed the molecular mechanisms of diosgenin against cerebral ischemia reperfusion effects（大脑的定量蛋白质组学揭示了薯蓣皂苷元对脑缺血再灌注效应的分子机制）

    文献名:Alterations of brain quantitative proteomics profiling revealed the molecular mechanisms of dios ...

  5. MySQL----SQL操作

    1.什么是SQL? Structured Query Language:结构化查询语言 其实就是定义了操作所有关系型数据库的规则.每一种数据库操作的方式存在不一样的地方,称为“方言”. 2.SQL通用 ...

  6. JS HEX十六进制与RGB, HSL颜色的相互转换【转载】

    Mark[转载] https://www.zhangxinxu.com/wordpress/2010/03/javascript-hex-rgb-hsl-color-convert/

  7. Django 视图笔记

    视图 概述 作用:视图接受web请求,并响应 本质:python中的一个函数 响应: 网页;重定向:错误视图(404.500) json数据 url配置 配置流程 1:指定根基url配置文件 sett ...

  8. TensorFlow系列专题(十四): 手把手带你搭建卷积神经网络实现冰山图像分类

    目录: 冰山图片识别背景 数据介绍 数据预处理 模型搭建 结果分析 总结 一.冰山图片识别背景 这里我们要解决的任务是来自于Kaggle上的一道赛题(https://www.kaggle.com/c/ ...

  9. Error response from daemon: rpc error: code = AlreadyExists desc = name conflicts with an existing object: service myweb already exists

    主机环境 centos7.2 执行 docker service create --replicas 6 --name myweb -p 80:80 nginx:latest 时 报 Error re ...

  10. Mysql性能优化：为什么你的count(*)这么慢？

    导读 在开发中一定会用到统计一张表的行数,比如一个交易系统,老板会让你每天生成一个报表,这些统计信息少不了 sql 中的count函数. 但是随着记录越来越多,查询的速度会越来越慢,为什么会这样呢?M ...