博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery动态生成bootstrap表格
阅读量:6535 次
发布时间:2019-06-24

本文共 2090 字,大约阅读时间需要 6 分钟。

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


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

转载地址:http://yykdo.baihongyu.com/

你可能感兴趣的文章
【LeetCode每天一题】Construct Binary Tree from Preorder and Inorder Traversal(使用前序和中序遍历构建二叉树)...
查看>>
Mysql性能基本测试
查看>>
洛谷 P1126 机器人搬重物
查看>>
java.lang.ClassFormatError
查看>>
NYOJ 简单数据结构
查看>>
结对编程,第二周作业
查看>>
避雷针 Lightning Conductor
查看>>
产品家:你的闷骚,我的产品!
查看>>
在vue里面使用jquery不生效问题
查看>>
[linux] C语言Linux系统编程进程基本概念
查看>>
MongoDB-C#驱动基本操作
查看>>
【笔记】最长递增子序列 Longest increasing subsequence(LIS)
查看>>
2000条你应知的WPF小姿势 基础篇<51-56 依赖属性>
查看>>
JAVA自学笔记13
查看>>
正则01
查看>>
Python cookbook笔记——求N个最大最小元素及lambda表达式
查看>>
制作支持UEFI PC的Server2008 R2系统安装U盘
查看>>
java注解[转]
查看>>
.NET连接MongoDB数据库实例教程
查看>>
北大ACM题库习题分类与简介(转载)
查看>>