<%@ 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. Spring Hello World

    1. 概述 Spring 框架是一个开源的 Java 平台,它最初是由 Rod Johnson 编写的,并且于 2003 年 6 月首次在 Apache 2.0 许可下发布. 1.1 依赖注入 1.2 ...

  2. [svc][op]ssh交互yes问题解决-expect

    Expect是Unix系统中用来进行自动化控制和测试的软件工具C67默认未安装:使用需要安装: yum install expect -ywhich expect #查看安装路径 核心命令: [roo ...

  3. 用TTTAttributedLabel创建变化丰富的UILabel

    转自:http://blog.csdn.net/prevention/article/details/9998575 1. 不同颜色的字段混合在一个Label里怎么实现? 看TTTAttributed ...

  4. Java并发编程之并发代码设计

    引子 之前的文章我们探讨了引发线程安全的原因主要是由于多线程的对共享内存的操作导致的可见性或有序性被破坏,从而导致内存一致性的错误.那么如何设计并发代码解决这个问题呐?我们一般使用这几种方式: 线程封 ...

  5. Django---ORM操作大全

    前言 Django框架功能齐全自带数据库操作功能,本文主要介绍Django的ORM框架 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MyS ...

  6. How do I iterate over a Scala List (or more generally, a sequence) using theforeach method or for loop?

    Scala List/sequence FAQ: How do I iterate over a Scala List (or more generally, a sequence) using th ...

  7. servlet的编码原理

    编码问题: 在介绍编码问题前,先介绍一下java平台(JVM)上的编码转化情况.首先要说明的一点,在JVM中,即java平台上,运行的程序一定都是Unicode编码方式的.对于代码中的字符串常量,根据 ...

  8. SharePoint自动化系列——通过PowerShell创建SharePoint Site Collection

    通过PowerShell创建SharePoint Site Collection,代码如下: Add-PSSnapin microsoft.sharepoint.powershell function ...

  9. 通过Windows PowerShell远程管理计算机（精简版）

    现在你手中有一台server(主控端),你打算通过主控端远程管理多台server(被控端).这个过程可以通过Windows PowerShell来完成. 首先在被控端上以管理员权限打开PowerShe ...

  10. 通过google浏览器的开发者工具修改cookie值

    打开一个页面F12,然后再刷新下.点到如下图位置刚可以添加或重设cookie的值.修改cookie的值时,需要注意要清除下cookie.不然修改的cookie不生效.