jQuery动态生成Bootstrap表格

最新推荐文章于 2024-08-02 14:21:03 发布

weixin_30568591

最新推荐文章于 2024-08-02 14:21:03 发布

阅读量96

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/sjqq/p/6361167.html

版权

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

转载于:https://www.cnblogs.com/sjqq/p/6361167.html

weixin_30568591

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery动态生成Bootstrap表格

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"...
复制链接

扫一扫