javascript - 在 jQuery 中显示、隐藏和分组列

Question

我有一张桌子，我需要对列进行分组。HTML 如何判断列是否属于一起？我一直在看 colgroup，但我不知道这是否是我需要的。

我需要使用 jquery 创建一个函数，该函数的工作方式类似于 Microsoft Excel 的 group 函数，因此我可以隐藏未使用的列并仅显示相关列，还可以选择显示其他列。

Answer 1

看看 jqGrid演示。它具有分组列的功能，并且我相信（至少对于旧版本）也可以隐藏它们。

Answer 2

你可以试试这样的...

HTML

<table>

<tr>
    <td>
        First Name
    </td>
    <td>
        Middle Initial
    </td>
    <td>
        Last Name
    </td>
</tr>
<tr>
    <td>
        John
    </td>
    <td>
        C
    </td>
    <td>
        Doe
    </td>
</tr>
<tr>
    <td>
        Jim
    </td>
    <td>
        D
    </td>
    <td>
        Doe
    </td>
</tr>
<tr>
    <td>
        Jane
    </td>
    <td>
        E
    </td>
    <td>
        Doe
    </td>
</tr>
</table>
<a  onclick="javascript:hideColumn('first')">Hide First Name</a>
<a  onclick="javascript:hideColumn('middle')">Hide Middle Initial</a>
<a  onclick="javascript:hideColumn('last')">Hide Last Name</a>

JavaScript

<script type="text/javascript">
function hideColumn(column) {
    var row = [];
    var dataCell = [];
    switch (column) {
        case 'first': {
            var a = document.getElementsByTagName('a');
            if(a[0].innerHTML == "Hide First Name")
            {
                row = document.getElementsByTagName('tr');
                for(var i = 0; i < row.length; i++){
                    dataCell = row[i].getElementsByTagName('td');
                    dataCell[0].style.visibility = "hidden";    
                }
                a[0].innerHTML = "Show First Name";
            }
            else
            {
                row = document.getElementsByTagName('tr');
                for(var i = 0; i < row.length; i++){
                    dataCell = row[i].getElementsByTagName('td');
                    dataCell[0].style.visibility = "visible";   
                }
                a[0].innerHTML = "Hide First Name";
            }
            break;
        }
        case 'middle': {
            var a = document.getElementsByTagName('a');
            if(a[1].innerHTML == "Hide Middle Initial")
            {
                row = document.getElementsByTagName('tr');
                for(var i = 0; i < row.length; i++){
                    dataCell = row[i].getElementsByTagName('td');
                    dataCell[1].style.visibility = "hidden";    
                }
                a[1].innerHTML = "Show Middle Initial";
            }
            else
            {
                row = document.getElementsByTagName('tr');
                for(var i = 0; i < row.length; i++){
                    dataCell = row[i].getElementsByTagName('td');
                    dataCell[1].style.visibility = "visible";   
                }
                a[1].innerHTML = "Hide Middle Initial";
            }
            break;
        }
        case 'last': {
            var a = document.getElementsByTagName('a');
            if(a[2].innerHTML == "Hide Last Name")
            {
                row = document.getElementsByTagName('tr');
                for(var i = 0; i < row.length; i++){
                    dataCell = row[i].getElementsByTagName('td');
                    dataCell[2].style.visibility = "hidden";    
                }
                a[2].innerHTML = "Show Last Name";
            }
            else
            {
                row = document.getElementsByTagName('tr');
                for(var i = 0; i < row.length; i++){
                    dataCell = row[i].getElementsByTagName('td');
                    dataCell[2].style.visibility = "visible";   
                }
                a[2].innerHTML = "Hide Last Name";
            }
            break;
        }
    }
}
</script>

由于您希望按项目所在的列对项目进行分组，因此它们将始终位于行中的同一位置。可能有更好/更少硬编码的方式来做到这一点。但希望这个例子会有所帮助。