欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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基本過濾選擇器使用介紹

    jQuery基本過濾選擇器使用介紹

    簡(jiǎn)單過濾選擇器：根據(jù)某類過濾規(guī)則進(jìn)行元素的匹配，書寫時(shí)都以冒號(hào)（：）開頭；簡(jiǎn)單過濾選擇器是過濾選擇器中使用最廣泛的一種，感興趣的朋友可以參考下
    2013-04-04
  • jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果

    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)框效果代碼

    這篇文章主要介紹了jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼,點(diǎn)擊登陸鏈接可彈出懸浮登錄框,涉及jQuery中show與hide方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • jquery 鍵盤事件的使用方法詳解

    jquery 鍵盤事件的使用方法詳解

    這篇文章主要介紹了jquery 鍵盤事件的使用方法詳解的相關(guān)資料,主要介紹keydown()、keyup()、keypress()等三種方法，需要的朋友可以參考下
    2017-09-09
  • jQuery layui常用方法介紹

    jQuery layui常用方法介紹

    layer是一款近年來備受青睞的web彈層組件，她具備全方位的解決方案，致力于服務(wù)各水平段的開發(fā)人員，您的頁面會(huì)輕松地?fù)碛胸S富友好的操作體驗(yàn)，接下來通過本文給大家介紹layui常用方法，需要的朋友參考下
    2016-07-07
  • jQueryUI 拖放排序遇到滾動(dòng)條時(shí)有可能無法執(zhí)行排序的小bug及解決方案

    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 插件分享

    10款非常有用的 Ajax 插件分享

    這篇文章與大家分享的是10款非常有用的 Ajax 插件，有用于圖片的，用于分頁的，還有用于導(dǎo)航的。這些作者的想法特別新穎，希望你能從中找到自己需要的插件
    2012-03-03
  • jquery click([data],fn)使用方法實(shí)例介紹

    jquery click([data],fn)使用方法實(shí)例介紹

    大概意思就是觸發(fā)每一個(gè)匹配元素的click事件，本文通過一個(gè)實(shí)例為大家詳細(xì)介紹下jquery click([data],fn)的使用方法，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
    2013-07-07
  • JQuery 文本框回車跳到下一個(gè)文本框示例代碼

    JQuery 文本框回車跳到下一個(gè)文本框示例代碼

    回車執(zhí)行跳到下一個(gè)文本框，在本文通過jquery簡(jiǎn)單實(shí)現(xiàn)下，需要的朋友可以參考下
    2013-08-08
  • jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)

    jQuery如何獲取同一個(gè)類標(biāo)簽的所有值(默認(rèn)無法獲取)

    jQuery總是只返回第一個(gè)類標(biāo)簽的值，所以無法達(dá)到我們的要求，那么jQuery如何獲取同一個(gè)類標(biāo)簽的所有的值，下面與大家分享方法
    2014-09-09

最新評(píng)論