bootstrap在线表格制作_bootstrap table样式制作表格 - CSDN
  • 学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。...下面就使用一个实例来讲一下如何使用Bootstrap现成的

    学习了runoob.com网站中的bootstrap内容之后,参照其中的内容自己做一下总结,以便帮助在这方面有疑惑的朋友,也有助于自己更好的消化所学的内容。

    我们应该庆幸自己活在这样一个互联网时代,开放、共享。很多之前我们费尽心思去实现的效果已经有前辈为我们总结出来并做成很好的框架,共享出来让我们使用,使得我们轻松就能实现很漂亮的效果。

    下面就使用一个实例来讲一下如何使用Bootstrap现成的css样式直接加在我们的table表格上,我们只需要写很少的代码就能轻松制作漂亮表格。

    比如我们要制作一个像下面这个表格:

    有了Bootstrap,只需写好html内容结构,加上Bootstrap写好的专用于表格的类样式即可实现图中的效果。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>BootStrap制作表格</title>
        <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
    </head>
    <body>
        <div class="container">
            <table style="width: 500px;" class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <th>表头1</th>
                        <th>表头2</th>
                        <th>表头3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>第1行第1列</td>
                        <td>第1行第2列</td>
                        <td>第1行第3列</td></tr>
                    <tr>
                        <td>第2行第1列</td>
                        <td>第2行第2列</td>
                        <td>第2行第3列</td></tr>
                    <tr>
                        <td>第3行第1列</td>
                        <td>第3行第2列</td>
                        <td>第3行第3列</td></tr>
                    </tbody>
            </table>
        </div>
    </body>
    </html>
    在这里为了方便美观我给他加了一个宽度500px;我们这里使用一个<div class="container"> 来作为基础面板包裹我们的table。container也属于bootstrap类样式,在webstorm中我们按住ctrl+点击左键进入container(任何脚本样式你都这样查看它里边的实现,前提是要先引入),可以看到bootstrap的属性如下:

    .container {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    containner可以适应浏览器为我们设置外边距,设置固定左右内边距15px。


    接下来说一下步骤:

    第一步:引入bootstrap脚本文件:

    <link type="text/css" rel="stylesheet" href="../libs/bootstrap.css">
    这个脚本你可以在 http://getbootstrap.com 官网中下载。


    第二步:写html内容结构代码。

    只设置了宽度,没有加入其他任何样式的裸妆他是这样子的:

    第三步:为table加入bootstrap样式:

     <table style="width: 500px;" class="table table-striped table-hover table-bordered">
    以上三步即可得到第一幅图的效果。


    接下来讲解一下这些样式的效果,runoob.com列出了比较简明的解析:


    在行列中,也可以使用.active  .success .danger这些用于行列的样式。比如我加入行列样式:

    效果是这样的:


    大家可以根据自己的需要来加入样式。



    展开全文
  • bootstrap制作表格

    2019-09-17 09:23:29
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>...link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <script src="JQuery/jquery-3.4.1.min.js"></script>
        <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    </head>
    
    <body>
    <form name="myForm">
        <table class="table table-bordered" id="tab" name="tab" border="0px">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>操作</td>
                <td>操作</td>
            </tr>
            <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
                <td>1</td>
                <td>王强</td>
                <td>19</td>
                <td>浙江</td>
                <td><a href="#" onclick="addRow()">添加</a></td>
                <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            </tr>
            <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
                <td>2</td>
                <td>小陈</td>
                <td>20</td>
                <td>江苏</td>
                <td><a href="#" onclick="addRow()">添加</a></td>
                <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            </tr>
            <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
                <td>3</td>
                <td>小海</td>
                <td>21</td>
                <td>上海</td>
                <td><a href="#" onclick="addRow()">添加</a></td>
                <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            </tr>
        </table>
    </form>
    </body>
    <script>
        var selectRow=null;
        //单击时,改变样式;
        function onClickChangeStyle(obj){
            //获取表格对象;
            var tab = document.getElementById("tab");
            //获取当前行选择下标;
            var currentRowIndex = obj.rowIndex;
            //获取表格所有行数;
            var tablRows = tab.rows.length;
            //循环表格的所有行;并且选择的当前行,改变背景颜色;
            for(var i = 1;i<tablRows;i=i+1){
                if(currentRowIndex == i){
                    //为选中的当前,设置css样式;
                    selectRow  = tab.rows[i];
                    tab.rows[i].className= "onClickStyle";
                }else{
                    //把没有选中的行的背景样式设置为白色;
                    tab.rows[i].className= "hideStyle";
                }
            }
        }
    
        //鼠标移入时,改变颜色;
        function onmouseOverMethod(selectThis){
            selectThis.className="displayStyle";
            if(selectRow==selectThis){
                selectThis.className="onClickStyle";
            }
        }
    
        //鼠标移除时,改变背景颜色;
        function onmouseOutMethod(selectThis){
            selectThis.className="hideStyle";
            if(selectRow == selectThis){
                selectThis.className="onClickStyle";
            }
        }
    
        //添加行;
        function addRow(){
            var tab = document.getElementById('tab');
            var rowIndex = tab.rows.length+1;
    
            //添加一行;
            var tr  = tab.insertRow();
            tr.onmouseover = tr.className="displayStyle" ;
            tr.onmouseout = tr.className="hideStyle" ;
            tr.onclick=function (){this.className="onClickChangeStyle(this)";}
    
            var td2 = tr.insertCell();
            var td3 = tr.insertCell();
            var td4 = tr.insertCell();
            var td5 = tr.insertCell();
            var td6 = tr.insertCell();
            var td7 = tr.insertCell();
    
            td2.innerHTML = ""+rowIndex;
            td3.innerHTML = "无";
            td4.innerHTML = "无";
            td5.innerHTML = "无地址";
            td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";
            td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";
    
            //初始化行;
            initRows(tab);
        }
    
        //初始化行,设置序列号;
        function initRows(tab){
            var tabRows = tab.rows.length;
            for(var i = 0;i<tabRows.length;i++){
                tab.rows[i].cells[0].firstChild.value=i;
            }
        }
    
        //删除行;(obj代表连接对象)
        function deleteRow(obj){
            var tab = document.getElementById('tab');
            //获取tr对象;
            var tr = obj.parentNode.parentNode;
    
            if(tab.rows.length>2){
                //tr.parentNode,指的是,table对象;移除子节点;
                tr.parentNode.removeChild(tr);
            }
            //重新生成行号;
            initRows(document.getElementById('tab'));
        }
    </script>
    </html>
    
    
    
    展开全文
  • Bootstrap的css样式以及JS、jQuery制作的动态更新表格模板,具有筛选、分页、排序等功能,全屏页面。表格制作精美,数据显示清晰合理,可直接应用于前端的开发。
  • Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 ...这里利用bootstrap做出一个表格以及分页的静态页面。 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&g...

     Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于 HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地 构建基于 PC 及移动端设备的 Web 页面需求。 

    这里利用bootstrap做出一个表格以及分页的静态页面。

    <!DOCTYPE html>
    <html lang="zh">
    
    	<head>
    		<meta charset="UTF-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
    		<title>Document</title>
    		<!--导入bootstrap.css-->
    		<link rel="stylesheet" type="text/css" href="asserts/bootstrap/css/bootstrap.css" />
    	</head>
    
    	<body>
    		<!--利用bootstrap限定范围-->
    		<div class="container">
    			<!--表格-->
    			<!--table-bordered:为所有表格的单元格添加边框  table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)-->
    			<table class="table table-bordered table-striped">
    				<tr>
    					<th>序号</th>
    					<th>姓名</th>
    					<th>性别</th>
    					<th>生日</th>
    					<th>手机号</th>
    					<th width="20%">操作</th>
    				</tr>
    				<tr>
    					<td>0001</td>
    					<td>0002</td>
    					<td>0003</td>
    					<td>0004</td>
    					<td>0005</td>
    					<td>
    						<!--btn-primary:原始按钮样式(未被操作) btn-xs:	制作一个超小按钮-->
    						<a href="" class="btn btn-primary btn-xs">
    							<!--glyphicon:字体图标-->
    							<span class="glyphicon glyphicon-info-sign"></span> 详情
    						</a>
    						<a href="" class="btn btn-info btn-xs">
    							<span class="glyphicon glyphicon-edit"></span> 编辑
    						</a>
    						<a href="" class="btn btn-danger btn-xs">
    							<span class="glyphicon glyphicon-remove"></span> 删除
    						</a>
    					</td>
    				</tr>
    				<tr>
    					<td>0001</td>
    					<td>0002</td>
    					<td>0003</td>
    					<td>0004</td>
    					<td>0005</td>
    					<td>
    						<a href="" class="btn btn-primary btn-xs">
    							<span class="glyphicon glyphicon-info-sign"></span> 详情
    						</a>
    						<a href="" class="btn btn-info btn-xs">
    							<span class="glyphicon glyphicon-edit"></span> 编辑
    						</a>
    						<a href="" class="btn btn-danger btn-xs">
    							<span class="glyphicon glyphicon-remove"></span> 删除
    						</a>
    					</td>
    				</tr>
    				<tr>
    					<td>0001</td>
    					<td>0002</td>
    					<td>0003</td>
    					<td>0004</td>
    					<td>0005</td>
    					<td>
    						<a href="" class="btn btn-primary btn-xs">
    							<span class="glyphicon glyphicon-info-sign"></span> 详情
    						</a>
    						<a href="" class="btn btn-info btn-xs">
    							<span class="glyphicon glyphicon-edit"></span> 编辑
    						</a>
    						<a href="" class="btn btn-danger btn-xs">
    							<span class="glyphicon glyphicon-remove"></span> 删除
    						</a>
    					</td>
    				</tr>
    			</table>
    
    			<div class="text-center">
    				<!--分页链接-->
    				<!--pagination:分页-->
    				<ul class="pagination pagination-sm">
    					<li class="disabled">
    						<a href="javascript:void(0)"><span>&laquo;</span></a>
    					</li>
    					<li class="active">
    						<a href="">1</a>
    					</li>
    					<li>
    						<a href="">2</a>
    					</li>
    					<li>
    						<a href="">3</a>
    					</li>
    					<li>
    						<a href="">4</a>
    					</li>
    					<li>
    						<a href="">...</a>
    					</li>
    					<li>
    						<a href="">99</a>
    					</li>
    					<li>
    						<a href="">100</a>
    					</li>
    					<li>
    						<a href=""><span>&raquo;</span></a>
    					</li>
    				</ul>
    			</div>
    
    			<div class="text-center">
    				<!--pager:翻页 默认链接是居中显示-->
    				<ul class="pager">
    					<!--previous:居左-->
    					<li class="previous">
    						<a href="">上一页</a>
    					</li>
    					<!--next:居右-->
    					<li class="next">
    						<a href="">下一页</a>
    					</li>
    				</ul>
    			</div>
    
    		</div>
    
    	</body>
    
    </html>

     

    展开全文
  • bootstrap复杂表格

    2016-04-19 18:31:09
    1.先生成外层表格: $('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:"detailFormatter",//点击展开预先执行事件 cache:

    1.先生成外层表格:
    这里写图片描述

    $('#tableActivity').bootstrapTable('destroy').bootstrapTable({
                url:'',
                detailView:true,
                detailFormatter:"detailFormatter",//点击展开预先执行事件
                cache: false,
                height: 550,
                showExport: true,
                exportDataType: "all",    
                pagination: true,
                pageSize: 10,
                pageList: [10, 25, 50, 100],
                search: true,
                searchAlign:'left',
                showRefresh: true,
                showToggle: true,
                showColumns: true,
                toolbarAlign: 'right',
                toolbar:"#toolbar",
                buttonsAlign:'left',
                clickToSelect: true,
                idField:'',
                columns: [
                          [
                              {
                                  title:'编号',
                                  field: 'index',
                                  rowspan: 2,
                                  align: 'center',
                                  valign: 'middle'
                              }, {
                                  title: '姓名',
                                  field: 'userName',
                                  rowspan: 2,
                                  align: 'center',
                                  valign: 'middle',
                                  sortable: true
    
                              }, {
                                  title: '讲义',
                                  colspan: 3,
                                  align: 'center'
                              }, {
                                  title: '视频',
                                  colspan: 3,
                                  align: 'center'
                              }, {
                                  title: '总完成情况',
                                  colspan: 3,
                                  align: 'center'
                              }
                          ],
                          [
                              {
                                  field: 'handoutCount',
                                  title: '讲义总数',
                                  sortable: true,
                                  align: 'center'
                              }, {
                                  field: 'handoutComCount',
                                  title: '完成数',
                                  sortable: true,
                                  align: 'center'
    
                              }, {
                                  field: 'handoutCountDegree',
                                  title: '完成率',
                                  sortable: true,
                                  align: 'center'
    
    
                              }, {
                                  field: 'videoCount',
                                  title: '视频总数',
                                  sortable: true,
                                  align: 'center'
    
    
                              }, {
                                  field: 'videoComCount',
                                  title: '完成数',
                                  sortable: true,
                                  align: 'center'
    
    
                              }, {
                                  field: 'videoCountDegree',
                                  title: '完成率',
                                  sortable: true,
                                  align: 'center'
    
    
                              }, {
                                  field: 'allCount',
                                  title: '总数',
                                  sortable: true,
                                  align: 'center'
    
    
                              }, {
                                  field: 'allComCount',
                                  title: '总完成数',
                                  sortable: true,
                                  align: 'center'
    
    
                              }, {
                                  field: 'allDegree',
                                  title: '总完成率',
                                  sortable: true,
                                  align: 'center'
    
    
                              }
                          ]
    
                      ]
    
            });

    2.生成展开之后的表格内容:

    function detailFormatter(index, row) {
                    handoutColums=[];
                    handoutData=[];
                    videoColums=[];
                    videoData=[];
                    var html = [];
                    html.push('<div  class="row">');
                    html.push('<div class="col-md-6">');
                    html.push('<table id="tableHandout'+index+'"></table>');
                    html.push('</div>');
                    html.push('<div class="col-md-6">');
                    html.push('<table id="tableVideo'+index+'"></table>');
                    html.push('</div>');
                    html.push('</div>');
                    handoutColums.push({
                        field: 'handoutIndex',title: '编号', sortable: true ,width: 150
                    },{
                        field: 'handoutName',title: '讲义名称', sortable: true ,width: 150
                    },{
                        field: 'degree',title: '完成度', sortable: true ,width: 150
                    });
                    videoColums.push({
                        field: 'videoIndex',title: '编号', sortable: true ,width: 150
                    },{
                        field: 'videoName',title: '视频名称', sortable: true ,width: 150
                    },{
                        field: 'degree',title: '完成度', sortable: true ,width: 150
                    });
                    $.each(row, function (key, value) {
                        if(key=="handout"){
                        $.each(value,function(index,handout){
                            var row = {};
                            row['handoutIndex'] = index+1;
                            row['handoutName']=handout.handoutName;
                            row['degree']=handout.degree;
                            handoutData.push(row);
    
                        });
                        }
                        if(key=="video"){
                        $.each(value,function(index,video){
                            var row = {};
                            row['videoIndex']=index+1;
                            row['videoName']=video.videoName;
                            row['degree']=video.degree;
                            videoData.push(row);
                        });
                        }
                    });
    
                    return html.join('');
                }

    3:填充表格内容:

     $('#tableActivity').on('expand-row.bs.table', function (e, index, row, $detail) {
                  initHandoutTable(handoutColums,handoutData,index);
                  initVideoTable(videoColums,videoData,index);
                }); 
    
                function initHandoutTable(colums,data,index){
    
    
                    $('#tableHandout'+index).bootstrapTable('destroy').bootstrapTable({
                        cache: false,
                        height: 200,
                        clickToSelect: true,
                        idField:'',
                        columns:colums,
                        data:data
                    });
    
                }
    
                function initVideoTable(colums,data,index){
    
    
                    $('#tableVideo'+index).bootstrapTable('destroy').bootstrapTable({
                        cache: false,
                        height: 200,
                        clickToSelect: true,
                        idField:'',
                        columns:colums,
                        data:data
                    });
    
                }

    这里写图片描述

    展开全文
  • <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reques....
  • dtGrid基于bootstrap表格、DTGrid基于bootstrap表格、大连首闻DTGrid
  • 创建bootstrap表格(含日期控件)
  • Bootstrap提供了表格组件,其中包括1种基础.table样式,4种附加样式(.table-striped,.table-bordered,.table-hover,.table-condensed)以及一个支持响应式布局的.table-responsive容器样式。需要注意的是每种...
  • 在使用Bootstrap表格过程中,只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,我们会详细介绍Bootstrap表格使用。 同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本...
  • 依赖的样式:bootstrap 效果图: 以下是html源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Table</title> <link rel="stylesheet" ...
  • bootstrap--表格制作

    2017-11-30 23:12:33
    bootstrap--表格制作
  • 所用到的技术vue+bootstrap 效果图如下 代码如下所示 <!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></...
  • 我是用bootstrap table来制作表格的,用js创建的方法,现在后台已经有返回json数据了。但是显示不到表格里面,返回json数据的标题和field也是一样的,就是显示不出来,以前用easyui的话,有个loadFilter来显示数据,...
  • bootstrap---表格样式

    2018-07-03 17:07:49
    表格样式在bootrap中,如果要用到表格记住要将表格中的类名写为“table”。如图:1.带条纹的样式请用类名“table-striped”。2.带边框的表格请用类名“table-bordered”。3.边框条纹可以一起使用4.鼠标悬停请用"...
  • 源代码已经发布,生成的表格虽然比较简陋,能用就行吧 https://github.com/HJXTSTU/AutoTable-With-Javascript
1 2 3 4 5 ... 20
收藏数 4,010
精华内容 1,604
关键字:

bootstrap在线表格制作