Javascript 如何隐藏表中的列集

我有一张桌子和两张桌子

<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>

校长1
校长2
数据1
数据2
数据3
数据4
数据5
数据1
数据2
数据3
数据4
数据5
数据1
数据2
数据3
数据4
数据5

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

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

谢谢，

---

Chen

您是否尝试过使用

ng click

和

ng hide

？一个很好的相关例子（尽管来自非常糟糕的学校）可以在这里找到：

你能展示一下你的想法吗。我以前也在想这个。但是这些表来自剑道格网。我无法为每个列或单元格手动更改它们。我和colgroup也试过，但没有成功。