jquery动态生成bootstrap表格

发布时间：2020-06-22 12:45:57 作者：matengbing
来源：网络阅读：3297

<%@ 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 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 >jquery生成bootstrap表格</caption>');
       $table.append($caption);
       var $thead=$('<thead></thead>');
       var $trs=$('<tr></tr>');
       var $th2=$('<th>姓名</th>');
       var $th3=$('<th>年龄</th>');
       $trs.append($th2);
       $trs.append($th3);
       $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>

jquery动态生成bootstrap表格

jquery动态生成bootstrap表格

相关阅读