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>

wKiom1gXYDWhGspKAAA_jo0J988442.png-wh_50

 本文转自 matengbing 51CTO博客,原文链接:http://blog.51cto.com/matengbing/1867875




相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
25 0
|
7月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
41 0
|
9月前
|
JavaScript
jQuery 表格全选反选
jQuery 表格全选反选
33 0
|
1月前
|
Java 数据库 Maven
基于SSM框架疫情之下社区管理系统(spring+springmvc+mybatis+jsp+jquery+bootstrap)
基于SSM框架疫情之下社区管理系统(spring+springmvc+mybatis+jsp+jquery+bootstrap)
|
6月前
|
XML JavaScript 小程序
使用jquery treetable 实现树形表格拖拽
这里记录一下使用jquery treetable时遇到的坑。 我这里的需求是做一个树形表格,并且可拖拽。 最后要实现的效果大概是这样的:(文末有实例)
30 0
|
7月前
|
JavaScript BI
jQuery根据填写的input的数值导出excel表格
jQuery根据填写的input的数值导出excel表格
30 0
|
7月前
|
JavaScript
jQuery动态生成input填写时间值并且提交给后端
jQuery动态生成input填写时间值并且提交给后端
40 0
|
7月前
|
JavaScript
jquery动态生成input,并且限制生成个数
jquery动态生成input,并且限制生成个数
24 0
|
7月前
|
JavaScript 前端开发
踩坑-Uncaught Error: Bootstrap's JavaScript requires jQuery
踩坑-Uncaught Error: Bootstrap's JavaScript requires jQuery
52 0
|
7月前
|
JavaScript Java
jQuery+Datatables实现表格批量删除功能
jQuery+Datatables实现表格批量删除功能
68 0