溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery動(dòng)態(tài)生成bootstrap表格

發(fā)布時(shí)間:2020-06-22 12:45:57 來(lái)源:網(wǎng)絡(luò) 閱讀:3288 作者:matengbing 欄目:web開發(fā)

<%@ 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 >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動(dòng)態(tài)生成bootstrap表格

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI