快捷導(dǎo)航

jQuery動(dòng)態(tài)生成Bootstrap表格

更新時(shí)間：2016年11月01日 14:33:39 作者：matengbing

這篇文章主要介紹了jQuery動(dòng)態(tài)生成bootstrap表格的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

效果圖如下所示：

<%@ 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>

您可能感興趣的文章:

相關(guān)文章

jquery中$.post()方法的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中$.post()方法的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jquery如何解決resize執(zhí)行兩次的問(wèn)題
這篇文章主要介紹了jquery如何解決resize執(zhí)行兩次的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的藍(lán)色二級(jí)導(dǎo)航條效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
Jquery實(shí)現(xiàn)視頻播放頁(yè)面的關(guān)燈開(kāi)燈效果
使用Jquery實(shí)現(xiàn)視頻播放頁(yè)面的關(guān)燈開(kāi)燈效果。其中視頻顯示使用embed 元素，該元素是html5的元素，所以使用支持html5的瀏覽器效果會(huì)更好，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下
2013-05-05
jQuery實(shí)現(xiàn)遍歷XML節(jié)點(diǎn)和屬性的方法示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)遍歷XML節(jié)點(diǎn)和屬性的方法,涉及jQuery針對(duì)xml文件的加載、節(jié)點(diǎn)遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2018-04-04
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框代碼實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
jQuery+HTML5加入購(gòu)物車代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery+HTML5加入購(gòu)物車的實(shí)現(xiàn)代碼，功能很齊全，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-08-08
jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法,結(jié)合實(shí)例形式分析了jQuery form表單創(chuàng)建與提交相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
jQuery中has()方法用法實(shí)例
這篇文章主要介紹了jQuery中has()方法用法,實(shí)例分析了has()方法的功能、定義及保留包含特定后代的匹配元素的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery 練習(xí)[一] 學(xué)習(xí)jquery的準(zhǔn)備工作
初次嘗試 jQuery, 近乎震撼! 簡(jiǎn)潔、高效、優(yōu)雅、平易, 太有思想了.
2010-05-05