jquery – 多重/ tbody设计

我有一个关于可用性/设计的问题.
我目前正在使用一些 JQuery来隐藏/显示整个区域.目前,这些都是在一个大桌子中,最上面是一个顶部的主标题,其次是第二个,这是显示什么的标题.接下来是另一个标题,它是在tbody中显示的隐藏的标题.
我知道这是可怕的风格,但我想要克服的问题是我希望所有行都是相同的,因为它们都显示相同类型的数据.

代码示例是

<table id="report">
    <thead>
    <tr id="header">
        <th>Country</th>
        <th>Population</th>
        <th>Area</th>
        <th>Official languages</th>
        <th></th>
    </tr>
    </thead>

    <thead>
    <tr>
        <td>United States of America</td>
        <td>306,939,000</td>
        <td>9,826,630 km2</td>
        <td>English</td>
        <td><div class="arrow"></div></td>
    </tr>
    </thead>

    <thead>
        <tr>
            <td>First Row</td>
            <td>Second Row</td>
            <td>Third Row</td>
            <td>Fourth Row</td>
            <td>Fifth Row</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td colspan="5">
            <img src="../125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
            <h4>Additional information</h4>
            <ul>
                <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
                <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
                <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
             </ul>   
        </td>
    </tr>
            <tr><td>some other stuff</td></tr>
    </tbody>
</table>

以下是将显示的内容：
alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png
alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

现在我以这种方式实际上是这样做的,因为一般来说,我将为实际的可显示标题(这个例子是国家数据)有4行,标题中只有3列被隐藏(第一行,第二行等).这个数据里面有一行是一个可以从10个字符到100个(100个是常见的)的URL,这导致整个显示改变,我的标题变成2或3行.虽然我想要的是所有的行保持一样是有任何方式只能与表1中的1个身体与一个1adad相关联,以使它不会影响任何其他.因为这可能是令人困惑的,因为有一个更好的方式来实际上有多个表,但是每个人的一个都保持不变,无论tbody的数据如何.
我知道会有问题,但任何帮助将不胜感激,并注意到我完全可以这样做.然而,需要的是数据可以被隐藏,这是一个表,并且将具有该信息的标题.可以有一个不需要匹配的可显示部分(它可以是div),每个部分内的数据应该保持相同的格式.

PS：如果下面的兴趣是我正在使用这个整个事情的JQuery.

<script type="text/javascript">  
    $(document).ready(function(){
        $("#report thead").children("tr:odd").not("#header").addClass("odd");
        $("#report thead").children("tr:odd").not("#header").each(function(index){$(this).attr("id","id" + index);});

        $("#report thead").children("tr:even").not("#header").addClass("bodyhead");
        $("#report thead:even").not(":first-child").each(function(index){$(this).attr("id","bhid" + index);});

        $("#report tbody").each(function(index){$(this).attr("id","bid" + index);});
        //$("#report tbody").each(function(index){$(this).attr("id","id" + index);});
        //$("#report tbody").children("tr:not(.odd)").hide();
        $("#report tbody").hide();
        $("#report thead:even").not(":first-child").hide();

        //$("#report tbody #id0").show();
        //For header of headers.
        $("#report thead").children("tr:first-child").show();
        $("#report thead").children("tr").not("#header").not(".bodyhead").click(function(){ 
            $("#report #b" + this.id).toggle();
            $("#report #bh" + this.id).toggle();
            $(this).find(".arrow").toggleClass("up");
        });
    });
</script>

解决方法

表中的多个< aad>是无效的HTML. < thead>中的大多数行都包含数据而不是标题,因此应该在< tbody>中.

is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others.

是的,使用单独的表.

如果你希望列宽度一直是一个静态的大小,以便表格彼此排列,设置样式table-layout：fixed;宽度：100％,并设置宽度样式在第一行中的每个单元格(或更好的< col> s),您不想共享布局宽度的相等比例.

(使用表格布局是一个好主意：尽可能固定,因为渲染速度更快,而且比自动表格布局算法更可预测,特别是在IE中,特别是当您使用colspan.)