多重设计/ tbody设计 [英] Multiple thead/tbody design
问题描述
我有一个有关可用性/设计的问题。
我目前正在使用一些JQuery来隐藏/显示整个区域。目前，这些都是在一个大桌子中，最上面是一个顶部的主标题，其次是第二个，这是显示什么的标题。接下来是另一个标题，它是在tbody中显示的隐藏的标题。
我知道这是可怕的风格，但是我想要克服的问题是我希望所有的行都是相同的，因为它们都显示相同类型的数据。
代码示例
< table id =report>
< thead>
< tr id =header>
< th>国家< / th>
< th>人口< / th>
< th> Area< / th>
< th>官方语言< / th>
< th>< / th>
< / tr>
< / thead>
< thead>
< tr>
< td>美国< / td>
< td> 306,939,000< / td>
< td> 9,826,630 km2< / td>
< td>英文< / td>
< td>< div class =arrow>< / div>< / td>
< / tr>
< / thead>
< thead>
< tr>
< td>第一行< / td>
< td>第二行< / td>
< td>第三行< / td>
< td>第四行< / td>
< td>第五行< / td>
< / tr>
< / thead>
< tbody>
< tr>
< td colspan =5>
< img src =../ 125px-Flag_of_the_United_States.svg.pngalt =美国国旗/>
< h4>附加信息< / h4>
< ul>
< li>< a href =http://en.wikipedia.org/wiki/Usa>美国维基百科< / a>< / li>
< li>< a href =http://nationalatlas.gov/>美国国家图集< / a>< / li>
< li>< a href =http://www.nationalcenter.org/HistoricalDocuments.html>历史文件< / a>< / li>
< / ul>
< / td>
< / tr>
< tr>< td>某些其他内容< / td>< / tr>
< / tbody>
< / table>
以下是将显示的内容：
alt文字http://img694.imageshack.us/img694/9773/screenshot20100708at100.png
alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png
现在我以这种方式实际上是这样做的，因为通常我将有4行用于实际的可显示标题（这个例子是国家数据），并且标题中只有3列被隐藏（第一行，第二列等） 。这个数据里面有一行是一个URL，可以是从10个字符到100+（100+是常见的）的任何地方，这导致整个显示改变，我的标题变成2或3行。虽然我想要的是所有的行保持一样是有任何方式只能与表1中的1个身体与一个1adad相关联，以使它不会影响任何其他。因为这可能是令人困惑的，因为有一个更好的方式来实际上有多个表，但是每个人的一个都保持不变，无论tbody的数据如何。
我知道会有问题，但任何帮助将不胜感激，并注意到我完全可以这样做不同的方式。然而，需要的是数据可以被隐藏，这是一个表，并且将具有该信息的标题。可以有一个不需要匹配的可显示部分（它可以是div），每个部分内的数据应该保持相同的格式。
PS：如果下面的兴趣是我正在使用这个整个事情的JQuery。
code>< 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 （＃first）hide（）;
// $（＃report tbody＃id0）show（）;
/ / b $ b $（＃report thead）。child（tr：first-child）。show（）;
$（＃report （＃header）。not（。bodyhead）。click（function（）{
$（＃report #b+ this.id） .toggle（）;
$（＃report #bh+ this.id）.toggle（）;
$（this）.find（。arrow）。toggleClass（up）;
}）;
}）;
< / script>
多个< thead>表中的是无效的HTML。您在< thead> 中的大部分行都包含数据不是标题，所以应该在< tbody> 。
有没有什么方法可以将1个tbody与表中的1个一起关联，这样它不会影响任何其他
是的，使用单独的表。
如果你想列的宽度一直是一个静态的大小一直下来，使表相互排列，设置样式 table-layout：fixed;宽度：100％，并在第一行的每个单元格上设置 width 样式（或更好的< col> s）您不想分享布局宽度的相等比例。
（这是一个很好的想要在可能的情况下使用 table-layout：fixed ，因为渲染速度更快，而且比自动表格布局算法更可预测，尤其是在IE中，特别是当您使用 colspan 。）
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.
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.png alt text 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.
PS: If interested below is the JQuery I am using for this entire thing.
<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>
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>.
is there any way to associate only 1 tbody with 1 thead inside the table so that it will not effect any others.
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 width styles 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.
(It's a good idea to use table-layout: fixed wherever 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.)
这篇关于多重设计/ tbody设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
