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>
您可能感興趣的文章:
- jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
- jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
- JQuery 動(dòng)態(tài)生成Table表格實(shí)例代碼
- JQuery Ajax動(dòng)態(tài)生成Table表格
- Jquery 動(dòng)態(tài)生成表格示例代碼
- jQuery實(shí)現(xiàn)多按鈕單擊變色
- 用JQuery實(shí)現(xiàn)表格隔行變色和突出顯示當(dāng)前行的代碼
- jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
- jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
- jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過高亮顯示效果代碼
- jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能效果【實(shí)例代碼】
- jQuery實(shí)現(xiàn)表格隔行及滑動(dòng),點(diǎn)擊時(shí)變色的方法【測試可用】
- jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法
相關(guān)文章
簡單過濾選擇器：根據(jù)某類過濾規(guī)則進(jìn)行元素的匹配，書寫時(shí)都以冒號(hào)（：）開頭；簡單過濾選擇器是過濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下2013-04-04
jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
鼠標(biāo)下拉滾動(dòng)置頂效果想必大家在瀏覽網(wǎng)頁時(shí)都有遇到過，下面有個(gè)不錯(cuò)的小例子，需要的朋友可以參考下2014-07-07
jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼,點(diǎn)擊登陸鏈接可彈出懸浮登錄框,涉及jQuery中show與hide方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jquery 鍵盤事件的使用方法詳解的相關(guān)資料,主要介紹keydown()、keyup()、keypress()等三種方法，需要的朋友可以參考下2017-09-09
layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力于服務(wù)各水平段的開發(fā)人員，您的頁面會(huì)輕松地?fù)碛胸S富友好的操作體驗(yàn)，接下來通過本文給大家介紹layui常用方法，需要的朋友參考下2016-07-07
jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案
前些日子不是在做使用Jquery-UI實(shí)現(xiàn)一次拖拽多個(gè)選中的元素操作嘛，在持續(xù)完善這個(gè)組件時(shí)遇到了一個(gè)關(guān)于拖放排序的bug。今天就著圖片和代碼重現(xiàn)一下，也順便告訴大家如何解決這個(gè)問題2016-12-12
這篇文章與大家分享的是10款非常有用的 Ajax 插件，有用于圖片的，用于分頁的，還有用于導(dǎo)航的。這些作者的想法特別新穎，希望你能從中找到自己需要的插件2012-03-03![jquery click([data],fn)使用方法實(shí)例介紹](http://img.jbzj.com/images/xgimg/bcimg7.png)
jquery click([data],fn)使用方法實(shí)例介紹
大概意思就是觸發(fā)每一個(gè)匹配元素的click事件，本文通過一個(gè)實(shí)例為大家詳細(xì)介紹下jquery click([data],fn)的使用方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
回車執(zhí)行跳到下一個(gè)文本框，在本文通過jquery簡單實(shí)現(xiàn)下，需要的朋友可以參考下2013-08-08
jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)
jQuery總是只返回第一個(gè)類標(biāo)簽的值，所以無法達(dá)到我們的要求，那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值，下面與大家分享方法2014-09-09