我想在 UI 中只向用户显示 3 列，但想将所有表数据导出到 excel，那么如何根据 header 文本隐藏列？

Question

这是我的表，我只想向用户显示前 3 列，但我想将所有数据导出到 Excel。 首先，如何根据 Header 文本隐藏列？

<table id="ibms" class="table table-bordered">

                              <thead>    
                                <tr>                      
                                  <th>IBMS Code</th>
                                  <th>Location Description</th>
                                  <th>FMS Location Code</th>
                                  <th>FMS Location Description</th>
                                  <th>Site</th>
                                  <th>Level</th>
                                  <th>Area</th>
                                  <th>Zone</th>
                                  <th>Unit</th>
                                  <th>Location</th>
                              </tr>
                          </thead> 
           
                             <tbody>
    
                            <tr><td>IB-0078</td>
                                  <td>Hello</td>
                                  <td>542</td>
                                  <td>Description here</td>
                                  <td>Industry</td>
                                  <td>1</td>
                                  <td>Arizona</td>
                                  <td>five</td>
                                  <td>2</td>
                                  <td>USA</td>
                               </tr>
                               <tr>
                               <td>IB-552</td>
                                  <td>World</td>
                                  <td>576</td>
                                  <td>Description here</td>
                                  <td>Textile</td>
                                  <td>2</td>
                                  <td>Texas</td>
                                  <td>one</td>
                                  <td>10</td>
                                  <td>USA</td>
                             </tr>
                             </tbody>
                            </table>
    
    
             

JS代码：
var hidecolumns = $("#ibms").DataTable();

        function locationhie(hidecolumns){       
                    
                            var u = $("th:contains(FMS Location Description)").index();
                            hidecolumns.column(u).visible( false );
                        }
        function locationhieSite(hidecolumns){       
                    
                            var a = $("th:contains(Site)").index();
                            hidecolumns.column(a).visible( false );
                        }
        function locationhielevel(hidecolumns){       
                    
                            var b = $("th:contains(Level)").index();
                            hidecolumns.column(b).visible( false );
                        }
        function locationhieArea(hidecolumns){       
                    
                            var c = $("th:contains(Area)").index();
                            hidecolumns.column(c).visible( false );
                        }
        function locationhieZone(hidecolumns){       
                    
                            var d = $("th:contains(Zone)").index();
                            hidecolumns.column(d).visible( false );
                        }
        function locationhieUnit(hidecolumns){       
                    
                            var e = $("th:contains(Unit)").index();
                            hidecolumns.column(e).visible( false );
                        }
        function locationhieLocation(hidecolumns){       
                    
                            var f = $("th:contains(Location)").index();
                            hidecolumns.column(f).visible( false );
                        }

任何人都可以帮助我如何实现这一目标？ 是否有任何替代解决方案可以在单个 function 中执行此操作？

Answer 1

您可以使用 CSS :nth-child伪类选择器来隐藏一些列，不需要 JS：

 .locations td:nth-child(n+4), .locations th:nth-child(n+4) { display: none; }

 <table id="ibms" class="table table-bordered locations"> <thead> <tr> <th>IBMS Code</th> <th>Location Description</th> <th>FMS Location Code</th> <th>FMS Location Description</th> <th>Site</th> <th>Level</th> <th>Area</th> <th>Zone</th> <th>Unit</th> <th>Location</th> </tr> </thead> <tbody> <tr> <td>IB-0078</td> <td>Hello</td> <td>542</td> <td>Description here</td> <td>Industry</td> <td>1</td> <td>Arizona</td> <td>five</td> <td>2</td> <td>USA</td> </tr> <tr> <td>IB-552</td> <td>World</td> <td>576</td> <td>Description here</td> <td>Textile</td> <td>2</td> <td>Texas</td> <td>one</td> <td>10</td> <td>USA</td> </tr> </tbody> </table>

.locations td:nth-child(n+4)从索引 4 开始选择.locations class 的元素中的任何td元素。索引从td在其父项中的第一次出现开始计算，第一个索引为 1。