Question

我有一个嵌套的表列，如：

enter image description here

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

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

Answer 2

在这里，您可以使用javascript隐藏要隐藏的列。但是你需要一些事件来隐藏和显示你需要的列。下面我在包含要隐藏的列的表中添加了一个类x。

<head>
    <style>
        .x
        {
            display:none;
        }   
    </style>
</head>

<body>
<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 x 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%;">1</td>
            <td style="width: 20%;">1</td>
            <td style="width: 40%;">
                <table class="table x table-striped table-bordered table-hover">
                    <tbody>
                        <tr data-ng-repeat="customerOrder in cutomer.orderList">
                            <th style="width: 50%;">1</th>
                            <th style="width: 50%;">1</th>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td style="width: 20%;">No Of Order</td>
        </tr>
    </tbody>
</table>

现在，如果您想在隐藏和显示之间切换，您可以通过javascript更改css（如果需要，此部分是可选的），但为此您需要一个事件，或者您也可以使用document.ready方法。例如我想你有一个id='slidingcolumns'的按钮。

$(document).ready(function(){
    $('#slidingcolumns').click(function(){
        $(".x").slideToggle();
    });
});

我希望这对你有所帮助祝你好运

Answer 3

以下是“概念”，仅用于按照您的要求使用索引隐藏列：

要按索引隐藏列，可以将CSS与：nth-child伪类一起使用。例如：td：nth-child（5）。＃5将是您想要使用的索引。如果您之前没有使用过nth-child，请查看此链接以获取更多详细信息/解释：http://css-tricks.com/almanac/selectors/n/nth-child（我建议您查看示例如何“选择第二个元素的第三个子元素”。
如果您想通过索引使用触发事件隐藏列，我会使用Rudra提到的javascript方法。例如，将一个类添加到要隐藏的html标记中，并使用事件将其隐藏以进行隐藏，或者将其绑定到id。

隐藏嵌套的html表列

3 个答案: