Question

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

我需要使用jquery创建一个函数，它可以像Microsoft Excel的组函数一样工作，因此我可以隐藏未使用的列，只显示相关的列，还可以显示其他列的选项。

Answer 1

看一下jqGrid demos。它具有分组列的功能，我相信（至少对于旧版本）也隐藏它们。

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>

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

在jQuery中显示，隐藏和分组列

2 个答案: