jQuery 多头/tbody设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3206239/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple thead/tbody design
提问by Craig
I have a question about usability/design. I currently am using some JQuery to hide/show entire areas. Currently these are all in one big table with a thead at the very top as the main header, followed by a second thead which is the header of what would be displayed. Next is another thead which is the header of whatever is hidden which is displayed in a tbody. I know this is horrible style however the problem I am trying to overcome is I want all rows to be the same as they are all displaying the same type of data.
我有一个关于可用性/设计的问题。我目前正在使用一些 JQuery 来隐藏/显示整个区域。目前，这些都在一个大表中，最顶部有一个标题作为主标题，然后是第二个标题，这是将要显示的标题。接下来是另一个thead，它是tbody 中显示的任何隐藏内容的标题。我知道这是一种可怕的风格，但是我试图克服的问题是我希望所有行都相同，因为它们都显示相同类型的数据。
Code example is
代码示例是
<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>
Below is what would be displayed: alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.pngalt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png
以下是将显示的内容： 替代文本 http://img694.imageshack.us/img694/9773/screenshot20100708at100.png替代文本 http://img822.imageshack.us/img822/9206/screenshot20100708at101.png
Now the reason I actually made it this way, is because generally I will have 4 rows for the actual displayable header (this example is the country data) and only 3 columns from the header being hidden (first row, second etc). This data inside has 1 row is a URL that can be anywhere from 10 characters to 100+ (100+ is common) which results in the entire display changing and my headers becoming 2 or 3 lines. While what I wanted was for all the rows to stay the same is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others. Since this is probably quite confusing is there a better way to actually have multiple tables but the thead's of each one stay the same no matter the data put in for the tbody. I know there will be questions but any help would be greatly appreciated and note I am completely open to doing this a different way. However what is required is that data can be hidden that is a table and will have a header for that information. There can be a displayable section that doesn't have to match (it could be a div) and the data inside each section should keep the same format.
现在我实际上这样做的原因是因为通常我将有 4 行用于实际可显示的标题（这个例子是国家数据），而标题中只有 3 列被隐藏（第一行、第二行等）。里面的这个数据有 1 行是一个 URL，可以是 10 个字符到 100+（100+ 很常见）的任何地方，这会导致整个显示发生变化，我的标题变成 2 或 3 行。虽然我想要的是让所有行保持不变，但有什么方法可以只将 1 个 tbody 与表内的 1 个 thead 相关联，这样它就不会影响任何其他行。由于这可能很令人困惑，是否有更好的方法来实际拥有多个表，但是无论为 tbody 输入的数据如何，每个表的主题都保持不变。我知道会有问题，但任何帮助将不胜感激，并注意我完全愿意以不同的方式做到这一点。然而，需要的是可以隐藏作为表格的数据并且将具有该信息的标题。可以有一个不必匹配的可显示部分（它可能是一个 div），并且每个部分内的数据应保持相同的格式。
PS: If interested below is the JQuery I am using for this entire thing.
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>
回答by bobince
Multiple <thead>?s in a table is invalid HTML. Most of the rows you have in <thead>?s are contain data not headings, so should be in a <tbody>.
<thead>表中的多个? 是无效的 HTML。您在<thead>?s 中的大多数行都包含数据而不是标题，因此应该在<tbody>.
is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others.
有什么方法可以只将 1 个 tbody 与表格内的 1 个 thead 相关联，这样它就不会影响任何其他人。
Yes, use a separate table.
是的，使用单独的表。
If you want the column widths to be a static size all the way down so that the tables line up with each other, set the styles table-layout: fixed; width: 100%on each table, and set widthstyles on each of the cells in the first row (or, better <col>?s) that you don't want to share an equal proportion of the layout width.
如果您希望列宽一直是静态大小，以便表格彼此对齐，请table-layout: fixed; width: 100%在每个表格上设置width样式，并在第一行中的每个单元格上设置样式（或者，更好<col>？s ) 您不想共享相同比例的布局宽度。
(It's a good idea to use table-layout: fixedwherever possible, as it's faster to render and much more predictable than the auto table layout algorithm, especially in IE, which has a slightly messed-up implementation of it particularly when you're using colspan.)
（table-layout: fixed尽可能使用它是个好主意，因为它比自动表格布局算法渲染速度更快，更可预测，尤其是在 IE 中，它的实现有点混乱，尤其是当您使用colspan.）
回答by jasongetsdown
generally I will have 4 rows for the actual displayable header (this example is the country data) and only 3 columns from the header being hidden (first row, second etc).
通常，我将有 4 行用于实际可显示标题（此示例是国家/地区数据），标题中只有 3 列被隐藏（第一行、第二行等）。
The theadshould only include the actual headings, i.e. "Country - population - Area - Official Languages" The rest is data and belongs in the tbody.
本thead应只包括实际的标题，即“国家-人口-地区-官方语言”剩下的就是数据，并在TBODY所属。
What you have labeled "First row, second row..." are columns, not rows. It seems like you're trying to hide all rows after the first row. Your table should look like this:
您标记为“第一行，第二行...”的是列，而不是行。似乎您试图隐藏第一行之后的所有行。您的表应如下所示：
<table id="report">
<thead>
<tr id="header">
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
<td id="tableToggle"><div class="arrow"></div></td>
</tr>
<tr>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
<td>Fourth Row</td>
<td>Fifth Row</td>
</tr>
<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>
And you can hide all rows after the first one with something like this (assuming they start hidden):
你可以用这样的东西隐藏第一行之后的所有行（假设它们开始隐藏）：
$('#tableToggle').toggle(
function() {
$(this).nextAll().show();
},
function() {
$(this).nextAll().hide();
});
If you have more than one hideable section in series within the same table use
如果您在同一个表格中串联了多个可隐藏部分，请使用
$(this).nextAll().slice(0, n).show();
where nis the number of rows in a section. Or you could just use a new table for each hideable section.
其中n是节中的行数。或者您可以为每个可隐藏部分使用一个新表格。
This data inside has 1 row is a URL that can be anywhere from 10 characters to 100+ (100+ is common) which results in the entire display changing and my headers becoming 2 or 3 lines.
里面的这个数据有 1 行是一个 URL，可以是 10 个字符到 100+（100+ 很常见）的任何地方，这会导致整个显示发生变化，我的标题变成 2 或 3 行。
I don't understand what you're saying here, but it sounds like something that can be solved by controlling the dimensions of the table in your stylesheet as bobince suggests.
我不明白你在这里说什么，但这听起来可以通过控制样式表中表格的尺寸来解决，就像 bobince 所建议的那样。
