jQuery动态生成Bootstrap表格
<%@ 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表格的更多相关文章
- jQuery动态生成不规则表格前后端
一.需求:有这么一张表 前四个属性当作联合主键 需要把该表所有的行在前端以表格形式显示出来,要求activityId相同时合并成一行,activityCode相同时,合并一行,activityVers ...
- Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库
利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值 并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...
- jQuery动态生成<select>下拉框
前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- jquery 动态生成html后click事件不触发原因
转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...
- 毕业设计---jQuery动态生成的a标签的事件绑定
这几天在毕业设计的前端设计阶段,准备放弃使用jsp,完全通过html+ajax+SSH进行网站的编写,在前端的页面显示我准备使用jQuery来实现数据的动态绑定.但是遇到动态添加的a标签无法直接通过$ ...
- jquery动态生成html代码绑定事件
今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...
- jquery动态生成二维码添加自定义logo
动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...
- VUE动态生成table表格(element-ui)(新增/删除)
(直接复制即可测试) 结构(红色部分 data/prop/v-model 数据绑定): <template> <el-table size="small" :da ...
随机推荐
- RhinoMock学习-绑定回调
Expect.Call(testClass.Test(new Arg())) .IgnoreArguments() .Return() .Callback(); return true; })); . ...
- C do {...} while (0) 在宏定义中的作用
如果你是一名C程序员,你肯定很熟悉宏,它们非常强大,如果正确使用可以让你的工作事半功倍.然而,如果你在定义宏时很随意没有认真检查,那么它们可能使你发狂,浪费N多时间.在很多的C程序中,你可能会看到许多 ...
- cocos2d-x中几种存储数据的方式
说明:本文所论述内容均基于cocos2dx 3.0 版本. 1.UserDefault 它是cocos2d-x用来存取基本数据类型用的.保存为XML文件格式. 查看CCUserDefault文件,可以 ...
- 解决 windows10和ubuntu16.04双系统下时间不对的问题
- 腾讯云Ubuntu挂载硬盘空间
第一.检查硬盘设备是否有数据盘 42G是系统盘那么就剩下了200G的剩余空间,那么下面我就把这200G挂载. 查询命令: sudo fdisk -l 我们可以看到有200GB的数据盘没有挂载,看好前 ...
- const在c和c++中地位不同
先测试C语言的const: #include<stdio.h> int main() { ; //等价于 //int const a = 10; //a = 11;//err ; cons ...
- qt离线下载
http://www.qtcn.org/bbs/read-htm-tid-1075.html
- ANSI文件操作
ANSI文件操作 在ANSI C中,对文件的操作分为两种方式,即流式文件操作和I/O文件操作,下面就分别介绍之. 一.流式文件操作 这种方式的文件操作有一个重要的结构FILE,FILE在stdio.h ...
- JavaScript 闭包原理分析
本文转载至 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 另一篇很好的资料 http://www.k ...
- 内核定时器timer_list
内核在时钟中断发生后执行检测各个定时器是否到期,到期后的定时器处理函数将作为软中断在底半部执行.实质上,时钟中断处理程序会唤起TIMER_SOFTIRQ软中断,运行当前处理器上到期的所有定时器.lin ...