我想在UI中只向用戶顯示3列，但想將所有表資料匯出到excel，那么如何根據標題文本隱藏該列？

這是我的表格，我只想向用戶顯示前 3 列，但我想將所有資料匯出到 Excel。首先如何根據標題文本隱藏列？

<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 );
                        }

任何人都可以幫助我如何實作這一目標？是否有任何替代解決方案可以在單個函式中執行此操作？

uj5u.com熱心網友回復：

您可以使用 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 開始選擇classtd元素中的任何元素。.locations索引從td其父元素中第一次出現開始計算，第一個索引為 1。

標籤：javascript 数据表

上一篇：如何顯示來自JSON物件的特定值。示例我想顯示Low的值，然后分配給React.js中的變數

下一篇：如何給邊框添加影片