javascript - 隐藏嵌套的 html 表格列

Question

我有一个嵌套表列，例如:

现在我想按表列索引隐藏标记列。这怎么可能？请提供概念而不是解决方案。我很困惑如何开始我的任务。

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th style="width: 20%;">Customer Name</th>
      <th style="width: 20%;">Location</th>
      <th style="width: 40%;">
        <table class="table table-striped table-bordered table-hover">
          <thead>
            <tr>
              <th style="width: 50%;">Order No</th>
              <th style="width: 50%;">Date</th>
            </tr>
          </thead>
        </table>
      </th>
      <th style="width: 20%;">No Of Order</th>
    </tr>
  </thead>
  <tbody>
    <tr data-ng-repeat="cutomer in gridData">
      <td style="width: 20%;">{{ cutomer.itemName }}</td>
      <td style="width: 20%;">{{ cutomer.itemName }}</td>
      <td style="width: 40%;">
        <table class="table table-striped table-bordered table-hover">
          <tbody>
            <tr data-ng-repeat="customerOrder in cutomer.orderList">
              <th style="width: 50%;">{{ customerOrder.orderNo }}</th>
              <th style="width: 50%;">{{ customerOrder.date }}</th>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="width: 20%;">No Of Order</td>
    </tr>
  </tbody>
</table>

Answer 1

试试这个:

function show_hide_column(col_no, do_show) {
   var tbl = document.getElementById('id_of_table');
   var col = tbl.getElementsByTagName('col')[col_no];
   if (col) {
     col.style.visibility=do_show?"":"collapse";
   }
}