<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'table.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" href="styles.css">
<script src="js/jquery-2.1.1.min.js" type="text/javascript">
</script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
<style>
tr:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div class="container">
</div>
<br>
</body>
<script language="JavaScript">
$(document).ready(function(){
var data=5;
createTable(".container",data);
}
);
function createTable(div,data){
var $table=$('<table class="table table-hover table-striped table-bordered"></table>');
$("div").append($table);
var $caption=$('<caption style="text-align:center;">jquery生成bootstrap表格</caption>');
$table.append($caption);
var $thead=$('<thead></thead>');
var $trs=$('<tr></tr>');
var $th1=$('<th>姓名</th>');
var $th2=$('<th>年龄</th>');
$trs.append($th1);
$trs.append($th2);
$thead.append($trs);
$table.append($thead);
for(var i=0;i<10;i++){
var $tr=$('<tr class="tr_content"></tr>');
$table.append($tr);
var $td1=$('<td class="td_content1">张三'+i+'</td>');
$tr.append($td1);
var $td2=$('<td class="td_content2">2'+i+'</td>');
$tr.append($td2);
$tr.on("click",".td_content2",function(){
});
}
for(var i=0;i<data;i++){
create_tbody();
}
$thread=$('</table>');
}
function create_tbody(){
}
</script>
</html>

jQuery动态生成Bootstrap表格的更多相关文章

  1. jQuery动态生成不规则表格前后端

    一.需求:有这么一张表 前四个属性当作联合主键 需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVers ...

  2. Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库

    利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...

  3. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  4. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  5. jquery 动态生成html后click事件不触发原因

    转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...

  6. 毕业设计---jQuery动态生成的a标签的事件绑定

    这几天在毕业设计的前端设计阶段,准备放弃使用jsp,完全通过html+ajax+SSH进行网站的编写,在前端的页面显示我准备使用jQuery来实现数据的动态绑定.但是遇到动态添加的a标签无法直接通过$ ...

  7. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

  8. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  9. VUE动态生成table表格（element-ui）(新增/删除)

    (直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...

随机推荐

  1. 【Android】17.1 Bound Services基本概念

    分类:C#.Android.VS2015: 创建日期:2016-03-03 一.Bound Services—被绑定的服务 1.什么是Bound Service Bound Service是指通过接口 ...

  2. 每日英语：The Biggest Distraction In The Office Is Sitting Next To You

    The big push in office design is forcing co-workers to interact more. Cubicle walls are lower, offic ...

  3. iOS截屏功能

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...

  4. hbase RowFilter如何根据rowkey查询以及实例实现代码 habase模糊查询【转】

    RowFilter用于过滤row key Operator Description LESS 小于 LESS_OR_EQUAL 小于等于 [EQUAL 等于 NOT_EQUAL 不等于 GREATER ...

  5. jsoup解析网页出现转义符问题

    https://www.oschina.net/question/996055_136438 *************************************** 我要解析这个网页  htt ...

  6. iOS 获取沙盒文件路径及 写入/删除 沙盒文件

    出于安全考虑,iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文件(也有例外,比如系统通讯录能在用户授权的情况下被第三方应用访问),这个规则把iOS系统的封闭性展现的淋漓尽致. 一.沙盒中 ...

  7. python idea 利用树莓派做家庭报警系统

    1 利用树莓派做家庭报警系统idea 功能如下: 1.程序家侧人不在家(7:00-6:00) 2.树莓派搭配摄像头,对这门进行图像识别,如果变化,门开了,就报警: 3.报警的方式是给我发短信,采信,或 ...

  8. Idea2016配置并破解jrebel

    http://blog.csdn.net/my_chen_suo_zhang/article/details/72677772

  9. Maven学习：项目之间的关系

    Maven不仅可以定义一个项目中各个模块之间的关系,还可以更延伸一步定义项目与项目之间的关系. 定义父子项目的好处还是挺多的.

  10. DatagridView内容自动换行和换行符换行

    内容自动换行: 在 DataGridView 新增 Row 时,設定 DataGridView 的 DefaultCellStyle 屬性WrapMode=true: 换行符换行: 在 DataGri ...