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

Question

这是我的Table；我只想向用户显示前 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 );
}

谁能帮我实现这个目标？是否有任何替代解决方案可用于在单个函数中执行此操作？

Answer 1

你可以使用CSS :nth-child伪class选择器来隐藏一些列，不需要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) 选择 .locations class 的元素中的任何 td 元素，从索引 4 开始。索引从 [=13 的第一次出现开始计算=] 在其父级中，第一个索引为 1.

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

I want to show the user only 3 columns in UI, But want to Export all table data to excel, So how can I hide the column based on the header text?

javascript

datatables