方法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. The Game Of Life – 数据结构与算法的敲门砖

    The Game Of Life(生命游戏,又称为细胞自动机)几乎是所有数据结构与算法导论教程前言的一个很经典的程序了.这是一个零玩家游戏,发生在一个平面网格里.每个格子的细胞都有死亡和存活两种状态, ...

  2. 如何使用域名访问自己的Windows服务器（Java web 项目）

    如何使用域名访问自己的Windows服务器(Java web 项目) 写在前面 前段时间在阿里云弄了个学生服务器,就想着自己搭建一个网站试一试,在网上查阅相关资料时发现大部分都是基于服务器是Linux ...

  3. Angular 从入坑到挖坑 - HTTP 请求概览

    一.Overview angular 入坑记录的笔记第四篇,介绍在 angular 中如何通过 HttpClient 类发起 http 请求,从而完成与后端的数据交互. 对应官方文档地址: Angul ...

  4. Scapy编写UDP扫描脚本

    脚本内容如下: from scapy.all import * import optparse import threading def scan(target,port): pkt=IP(dst=t ...

  5. Cisco二层交换机命令

    1.二层交换机基本配置 Switch >Switch >enable   # 进入特权模式 Switch#configure terminal   # 进入全局配置模式 Switch(co ...

  6. 关于MySQL 建表的一些建议

    由于在生产环境下,我们对MySQL数据库的操作通常是通过命令行进行操作,因此,建议建表的时候也手写MySQL语句(不建议用图形界面建表). 1.添加注释的格式 在编写MySQL语句时,我们通常会被要求 ...

  7. RNN，GRU，LSTM

    2019-08-29 17:17:15 问题描述:比较RNN,GRU,LSTM. 问题求解: 循环神经网络 RNN 传统的RNN是维护了一个隐变量 ht 用来保存序列信息,ht 基于 xt 和 ht- ...

  8. IDEA编写 Scala时没有语法检查和错误提示

    #问题描述 在IDEA中写scala程序时,一些明显的语法错误不进行检查,没有像写Java时的红线什么的,当编译运行时,编译失败. https://blog.csdn.net/weizheng1000 ...

  9. Xamarin.Forms读取并展示Android和iOS通讯录 - TerminalMACS客户端

    Xamarin.Forms读取并展示Android和iOS通讯录 - TerminalMACS客户端 本文同步更新地址: https://dotnet9.com/11520.html https:// ...

  10. SFDC 401认证准备及考试

    401认证准备及考试 刚过了401的认证,一些个人的体会,希望能帮助到准备过401的朋友. 1. 考试只是手段,不是目的.这个链接的视频请认真看完,http://www.salesforcetrain ...