Question

我有一张表与2张表相结合

<div>
        <div>
            <table>
                <colgroup>
                    <col style="width:95px" />
                    <col style="width:95px" />
                    <col style="width:95px" />
                    <col style="width:95px" />
                    <col style="width:95px" />
                </colgroup>
                <tr class="header">
                    <th colspan="2">Header1</th>
                    <th colspan="3">Header2</th>
                </tr>
                <tr>
                    <th>data1</th>
                    <th>data2</th>
                    <th>data3</th>
                    <th>data4</th>
                    <th>data5</th>
                </tr>
            </table>
        </div>
    </div>
    <div>
        <table>
            <colgroup>
                <col style="width:95px" />
                <col style="width:95px" />
                <col style="width:95px" />
                <col style="width:95px" />
                <col style="width:95px" />
            </colgroup>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
            <tr>
                <td>data1</td>
                <td>data2</td>
                <td>data3</td>
                <td>data4</td>
                <td>data5</td>
            </tr>
        </table>
    </div>

我想点击第一个标题行上的一个单元格。然后折叠除第一列之外的组中的所有列。例如，我单击Header2，根据colspan，隐藏data4和data5列，只显示data3列。再次单击显示全部返回。

另外，如果我不使用jquery，我可以只使用angular和CSS吗？

谢谢，陈

Answer 1

您是否尝试过使用ng-click和ng-hide？一个好的和相关的例子（尽管来自非常糟糕的w3schools）可以在这里找到：http://www.w3schools.com/angular/tryit.asp?filename=try_ng_events_hide

如何隐藏表中的列集

1 个答案: