iquery动态生成bootstrap表格-阿里云开发者社区

开发者社区> 科技小能手> 正文

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
超算Titan仅用一天生成AI神经网络,顶尖人类科学家则需数月
美国能源部橡树岭国家实验室利用超级计算机Titan,开发出一种人工智能系统,一天之内就能生成神经网络。而最聪明的数据科学家也需要好几个月才能开发出一个深度学习软件。即使是Google的AutoML,也需要数周的时间才能设计出一个优秀的图像识别系统。
1317 0
bootstrap 表格、表单、面板、模态框
表格 .table-responsive用来创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。.table-hover的效果是鼠标所在行底色变灰。 &lt;table class="table table-hover"&gt; &lt;caption&gt;宝丰一高2011高考成绩表(理科前1000)&lt;/capt
1750 0
利用Java动态生成 PDF 文档
利用Java动态生成 PDF 文档,则需要开源的API。首先我们先想象需求,在企业应用中,客户会提出一些复杂的需求,比如会针对具体的业务,构建比较典型的具备文档性质的内容,一般会导出PDF进行存档。那么目前最佳的解决方案,你可能会想到 iText ,对没错。。。 iText+(Velocity / Freemarker)可以实现。不过据我熟悉,iText本身提供的HTML解析器还是不够强大,许
3302 0
Jquery 中为后生成或插入的 Html 元素先设定响应事件处理方法
Jquery 中为后生成或插入的 Html 元素先设定响应事件处理方法 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循“署名-非商业用途-保持一致”创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。
732 0
jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行   合并的方法 $("#tableid").mergeCell({  cols:[X,X] ///参数为要合并的列}) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.p
1111 0
23706
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载