0

我有一个表（并且无法使用，因为在尝试隐藏列时标题偏移 1），每列都有自己的 col id=""。我想在下面的代码中使用 jquery 来选择表中的列并将它们关闭和打开。

这是表格：

<article class="technical">
                <div id="technical-container">
                    <h1><span id="technology">Technologies</span> / <span id="compliance">Compliance</span> / <span id="certification">Certification</span></h1>
                    <table id="tech-table" cellspacing="0">
                        <colgroup>
                            <col>
                            <col id="type" class="type">
                            <col id="name">
                            <col id="startdate">
                            <col id="currentenddate">
                            <col id="elapsed">
                            <col id="version">
                            <col id="rating">
                            <col id="project">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>type</td>
                                <td>Name</td>
                                <td>Start Date</td>
                                <td>Current/End Date</td>
                                <td>Elapsed</td>
                                <td>Version(s)</td>
                                <td>Personal Rating</td>
                                <td>Project</td>
                            </tr>
                            <tr>
                                <td>technology</td>
                                <td>J2EE</td>
                                <td>November, 2011</td>
                                <td><span id="current"></span></td>
                                <td>TODO</td>
                                <td>1.5, 1.6, 1.7</td>
                                <td>2</td>
                                <td>Contractor Optimization</td>
                            </tr>
                            <tr>
                                <td>technology</td>
                                <td>JS</td>
                                <td>April, 2012</td>
                                <td><span id="current"></span></td>
                                <td>TODO</td>
                                <td>?</td>
                                <td>1</td>
                                <td>Resume Builder</td>
                            </tr>
                            <tr>
                                <td>compliance</td>
                                <td>CIP</td>
                                <td>May, 2008</td>
                                <td>August, 2011</td>
                                <td>TODO, 3 years, 4 mos</td>
                                <td>n/a</td>
                                <td>2</td>
                                <td>Protection</td>
                            </tr>
                            <tr>
                                <td>certification</td>
                                <td>Red Cross</td>
                                <td>May, 2007</td>
                                <td>April, 2013</td>
                                <td>TODO, 6 years</td>
                                <td>n/a</td>
                                <td>3</td>
                                <td>Life Saving</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </article>

以下是单击以进行隐藏的按钮：

<article>
                <header>
                    <h1>What</h1>
                    <div class="mydiv">
                        <p1>this sections involves what I work with</p1>
                    </div>
                </header>
                <section>
                    <div class="mydiv">
                        <span id="what1"><button type="button" class="button" id="clickTech">Technologies</button></span> <span id="what2"><button type="button" class="button" id="clickComp">Compliance</button></span> <span id="what3"><button type="button" class="button" id="clickCert">Certifications</button></span>
                        <!-- <input type="button" class="btn" value="Technologies" id="clickTech" / -->
                    </div>
                </section>
                <section>
                    <h3><span id="whatsel2"><button type="button" class="button-vert" id="clickStart">Start Date</button></span></h3>
                    <h3><span id="whatsel3"><button type="button" class="button-vert" id="clickEnd">Current/End Date</button></span></h3>
                    <h3><span id="whatsel4"><button type="button" class="button-vert" id="clickElapsed">Elapsed Time</button></span></h3>
                    <h3><span id="whatsel5"><button type="button" class="button-vert" id="clickVersion">Version(s)</button></span></h3>
                    <h3><span id="whatsel6"><button type="button" class="button-vert" id="clickRating">Personal Rating</button></span></h3>
                    <h3><span id="whatsel7"><button type="button" class="button-vert" id="clickProject">Project</button></span></h3>
                </section>
                <!-- <footer>
                    <h2>footer</h2>
                    <p>footer</p>
                </footer> -->
            </article>

这是隐藏行的工作选择器：

            var rowSelector = function (args) {
            $("#"+args.data.type).toggle();
            $("#tech-table tr").each(function(){
                if ($($(this).children()[0]).text()==args.data.type) {
                    $(this).toggle();
                }
            });
        };
        // $("#clickTech").click({type:"technology"},generalSelector);
        // assoc array is id:type
        var hiders = {"#clickTech":"technology", "#clickComp":"compliance", "#clickCert":"certification"};
        for (var id in hiders) {
            $(id).click({type:hiders[id]}, rowSelector);
        }

这就是我到目前为止使用列选择器的内容，但需要第 3、4 和 5 行的帮助：

            var colSelector = function (args) {
            $("#"+args.data.type).toggle();
            $("#tech-table col").each(function(){
                if  ($($(this)).text()==args.data.type) {
                    $(this).toggle();
                }
            });
        };
        // $("#clickTech").click({type:"technology"},generalSelector);
        // assoc array is id:type
        var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
    for (var id in hiders) {
        $(id).click({type:colHiders[id]}, colSelector);
    }

感谢您的指导和帮助。

4

3 回答 3

2

如果您不想使用@jatrim 的 css 解决方案，这里有一个 javascript 答案

     var colSelector = function (args) {
        var num = 0;
        var i = 0;
        $($("#tech-table tr")[0]).find('td').each(function(){
            if ($(this).text() == args.data.type)
                num=i;
            i++;
        });
        if (num!=0){
            $("#tech-table tr").each(function(){
                var tds = $(this).find('td');
                $(tds[num]).toggle();
            });
        }
    };
    // $("#clickTech").click({type:"technology"},generalSelector);
    // assoc array is id:type
    var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
    for (var id in colHiders) {
        $(id).click({type:colHiders[id]}, colSelector);
    }

还有要测试的小提琴在这里http://jsfiddle.net/ueKcL/

于 2012-06-05T20:58:36.747 回答
0

我认为您想要的在这里：使用 css 显示/隐藏 html 表格列。

我特别喜欢这个：$('td:nth-child(2)').hide();其中 2 是您要隐藏的列的索引。

于 2012-06-05T20:53:22.870 回答
0

您可能可以执行类似的操作 - 将标题（或 col 标签的其他属性）添加到 col 标签，并且 title 的值是列的索引。所以 col id="name" 将是

<col id="name" title="2">

忽略第一个空 col 标记。那么你将不得不使用 :nth-child （标题属性）来定位 td 并将它们全部隐藏。

您不需要添加标题，仍然能够找出 col 的索引，但它使用属性简化了脚本

或者

您甚至可以通过单击按钮传递列索引，也有很多方法可以做到这一点。但最终你仍然需要使用 :nth-child 来隐藏 td

于 2012-06-05T20:55:08.980 回答