jQuery动态生成Bootstrap表格


Posted in Javascript onNovember 01, 2016

效果图如下所示:

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>
Javascript 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 #Javascript
jQuery双向列表选择器select版
Nov 01 #Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 #Javascript
JS button按钮实现submit按钮提交效果
Nov 01 #Javascript
Javascript 动态改变imput type属性
Nov 01 #Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 #Javascript
javascript 内置对象及常见API详细介绍
Nov 01 #Javascript
You might like
php实现中文转数字
2016/02/18 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
不使用ajax实现无刷新提交表单
2014/12/21 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
python中的sort方法使用详解
2014/07/25 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python中字符串与编码示例代码
2019/05/20 Python
django框架模板语言使用方法详解
2019/07/18 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python 爬虫的原理
2020/07/30 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
Wallis官网:英国女装零售商
2020/01/21 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
安全生产目标管理责任书
2014/07/25 职场文书
购房委托书范本
2014/09/18 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
加入学生会自荐书
2015/03/05 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android