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 相关文章推荐
JavaScript中变量提升 Hoisting
Jul 03 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
vue+element UI实现树形表格带复选框的示例代码
Apr 16 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
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
JAVA/JSP学习系列之六
2006/10/09 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
vue实现记事本功能
2019/06/26 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
python中常用的数据结构介绍
2021/01/12 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
大专毕业生简历的自我评价
2013/10/20 职场文书
医院总经理职责
2013/12/26 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
建设投标担保书
2014/05/13 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
领导班子整改方案
2014/10/25 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书