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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
微信小程序实现多行文字滚动
Nov 18 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添加Xdebug扩展的方法
2014/02/12 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
PHP7 list() 函数修改
2021/03/09 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JQuery学习总结【二】
2016/12/01 Javascript
Javascript的this用法
2017/01/16 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
keep-alive保持组件状态的方法
2020/12/02 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
python 实现两个npy档案合并
2020/07/01 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
物流专业求职信
2014/06/30 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
小学安全教育主题班会
2015/08/12 职场文书
会议承办单位欢迎词
2015/09/30 职场文书