jq导出带样式的excel表格

1
2
引入jS<br><script type="text/javascript" src="/Public/js/jquery.2.2.4.min.js"></script>
<script type="text/javascript" src="/Public/js/jquery.table2excel.js"></script><br><br>下载链接:

https://files.cnblogs.com/files/blogs/727088/jquery.table2excel.js?t=1692939270&download=true

https://files.cnblogs.com/files/blogs/727088/jquery.2.2.4.min.js?t=1692939270&download=true

  

body部分

1
2
3
4
5
6
7
8
9
10
11
<p ><button class="exportBtnClass">点击导出表格</button> </p>
 
<table id="table1" >
 
  
{$table_content}
  
 
  
</table>

  

JS部分:  这是一个标记重复值的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$(document).ready(function() {
 
   let tds=$('td');
   let jj={};
   tds.each(function(i,e){
          if (i==6 || (i-6)%9==0){
            
            // console.log(i,'==>',$(e),'==>',$(e).text(),'==>', $(e).parent());
             $(e).parent().addClass($(e).text());
 
             /*计数*/
             if( jj[$(e).text()]){
 
             jj[$(e).text()]++;
               }else{
                  jj[$(e).text()]=1;
                  }
                                    
             }
      }
   )
 
 
  // console.log(jj);
   for (let i in jj){
     //   console.log('属性名为:',i)
      //  console.log('值为:',jj[i])
       if(jj[i]>1){
         let sel_tr=$("."+i);
        // sel_tr.css("background", "yellow");
        //   console.log(sel_tr.children("td"));
           sel_tr.children("td").css("background", "yellow");/*table2excel.JS 导出样式需要在td上加样式*/
       }
    }
 
 
//导出表格
    $(".exportBtnClass").click(function(e){
     var table = $("#table1") ;
     if(table && table.length){
  
          $(table).table2excel({
 
             filename: "filename.xls",
             sheetName: 'Sheet1',
             fileext: ".xls", //File extension type
             preserveColors: true //是否带样式
         });
     }
 });  
 
});
 
 
 
 
 </script>

  

posted @   wsh3166Sir  阅读(172)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示