官网：http://www.bootcss.com/，table文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
引入css,js文件
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css"> <script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
使用table表格时，还要引用
<link rel="stylesheet" href="/ttest/src/bootstrap-table.css"> <script src="/ttest/src/bootstrap-table.js"></script> <script src="/ttest/src/locale/bootstrap-table-zh-CN.js"></script>
新建一个bootstraps3的文件夹，把从官网下载的bootstraps3三个文件夹拖入新建的bootstraps3文件夹内， 并在js文件夹内放入jQuery文件
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css"> <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css"> <script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/ttest/src/bootstrap-table.css"> <script src="/ttest/src/bootstrap-table.js"></script> <script src="/ttest/src/locale/bootstrap-table-zh-CN.js"></script> <script> var pd=[]; $(function(){ $('#table').bootstrapTable({ columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }, { field: 'id', title: '操作', formatter:function(value,row ,index){ pd.push(row) return '<div class="rows">'+ '<div class="col-md-4" style="blackground-color:blue;color:red" onclick="f1('+index+')">修改</div>'+ '<div class="col-md-4" style="blackground-color:blue;color:red">删除</div>'+ '</div>' } }], data: [{ id: 1, name: 'Item 1', price: '$1', }, { id: 2, name: 'Item 2', price: '$2', },{ id: 3, name: 'Item 2', price: '$2', }] }); }) f1=function (index){ $('#tb_1').val(pd[index].id); $('#tb_2').val(pd[index].name); $('#tb_3').val(pd[index].price); $('#tb_4').val(pd[index].id); } function f2(){ $("input").val(''); } </script> </head> <body> <div class="container-fluid"> <div class="rows"> <table id="table"></table> </div> <div class="rows"> <form action=""> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label for="exampleInputName2">参数1</label> <input type="text" class="form-control" id="tb_1" placeholder="参数1"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="exampleInputName2">参数2</label> <input type="text" class="form-control" id="tb_2" placeholder="参数2"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="exampleInputName2">参数3</label> <input type="text" class="form-control" id="tb_3" placeholder="参数1"> </div> </div> <div class="col-md-3"> <div class="form-group"> <label for="exampleInputName2">参数4</label> <input type="text" class="form-control" id="tb_4" placeholder="参数2"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <button type="submit" class="btn btn-default">提交</button> </div> <div class="col-md-6"> <button type="button" class="btn btn-default" onclick="f2()">重置</button> </div> </div> </form> </div> </div> </body> </html>