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 相关文章推荐
通过 Dom 方法提高 innerHTML 性能
Mar 26 Javascript
JQuery 初体验(建议学习jquery)
Apr 25 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
js闭包的用途详解
Nov 09 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
从0开始学Vue
Oct 27 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
安装vue-cli的简易过程
May 22 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
js核心基础之闭包的应用实例分析
May 11 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的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
JQuery 常用方法基础教程
2009/02/06 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python异常处理操作实例详解
2018/08/28 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
百度软件工程师职位
2013/02/14 面试题
实习会计求职自荐信范文
2014/03/10 职场文书
幼儿园教师求职信
2015/03/20 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
Pytest中conftest.py的用法
2021/06/27 Python
Python基本知识点总结
2022/04/07 Python