iquery动态生成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>

wKioL1gXTe7SQbn5AAA_jo0J988835.png-wh_50


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


相关文章
|
7月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
55 1
|
7月前
|
前端开发
表格插件-bootstrap table的隔行换色
表格插件-bootstrap table的隔行换色
85 0
|
7月前
|
前端开发 JavaScript
表格插件-bootstrap table的表内查看编辑删除
表格插件-bootstrap table的表内查看编辑删除
65 0
|
8月前
|
前端开发
|
29天前
|
前端开发
BootStrap 5 保姆级教程(三):表格 & 图片
BootStrap 5 保姆级教程(三):表格 & 图片
|
7月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
98 0
|
7月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
29 0
|
7月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
74 2
|
7月前
|
前端开发
bootstrap table表格外面的边框全部去掉
bootstrap table表格外面的边框全部去掉
119 1
|
7月前
|
JSON 前端开发 JavaScript
bootstrap table表格内容居中对齐
bootstrap table表格内容居中对齐
61 0