Nhiều thiết kế thead/tbody

Question

Tôi có câu hỏi về khả năng sử dụng/thiết kế. Tôi hiện đang sử dụng một số JQuery để ẩn/hiển thị toàn bộ khu vực. Hiện tại đây là tất cả trong một bảng lớn với một đập ở đầu trang như là tiêu đề chính, tiếp theo là một thead thứ hai đó là tiêu đề của những gì sẽ được hiển thị. Tiếp theo là một thead mà là tiêu đề của bất cứ điều gì là ẩn được hiển thị trong một tbody. Tôi biết đây là phong cách khủng khiếp tuy nhiên vấn đề tôi đang cố gắng vượt qua là tôi muốn tất cả các hàng đều giống như tất cả chúng đều hiển thị cùng một loại dữ liệu.

Mã ví dụ là

<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> 

Dưới đây là những gì sẽ được hiển thị: alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

Bây giờ là lý do tôi thực sự thực hiện nó theo cách này, là bởi vì thường tôi sẽ có 4 dòng cho thực tế tiêu đề có thể hiển thị (ví dụ này là dữ liệu quốc gia) và chỉ có 3 cột từ tiêu đề bị ẩn (hàng đầu tiên, thứ hai v.v.). Dữ liệu này bên trong có 1 hàng là một URL có thể ở bất kỳ đâu từ 10 ký tự đến 100+ (100+ là phổ biến) dẫn đến toàn bộ màn hình thay đổi và tiêu đề của tôi trở thành 2 hoặc 3 dòng. Trong khi những gì tôi muốn là cho tất cả các hàng để ở lại giống nhau là có bất kỳ cách nào để kết hợp chỉ 1 tbody với 1 thead bên trong bảng để nó sẽ không ảnh hưởng đến bất kỳ người khác. Vì điều này có lẽ khá khó hiểu là có một cách tốt hơn để thực sự có nhiều bảng nhưng thead của mỗi một ở lại giống nhau không có vấn đề dữ liệu đưa vào cho tbody. Tôi biết sẽ có câu hỏi nhưng bất kỳ trợ giúp nào cũng sẽ được đánh giá cao và lưu ý rằng tôi hoàn toàn cởi mở để thực hiện điều này theo một cách khác. Tuy nhiên những gì được yêu cầu là dữ liệu có thể được ẩn đó là một bảng và sẽ có một tiêu đề cho thông tin đó. Có thể có một phần có thể hiển thị mà không cần phải khớp (có thể là div) và dữ liệu bên trong mỗi phần phải giữ nguyên định dạng.

PS: Nếu quan tâm dưới đây là JQuery tôi đang sử dụng cho toàn bộ điều này.

<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> 

Answer 1

Nhiều <thead> s trong bảng không hợp lệ HTML. Hầu hết các hàng bạn có trong <thead> s đều chứa dữ liệu không phải là tiêu đề, vì vậy phải ở trong một số <tbody>.

là có cách nào để chỉ liên kết 1 người với 1 thead bên trong bảng để nó sẽ không ảnh hưởng đến bất kỳ người nào khác.

Có, sử dụng bảng riêng.

Nếu bạn muốn chiều rộng cột là kích thước tĩnh tất cả các chiều để các bảng xếp hàng với nhau, hãy đặt kiểu table-layout: fixed; width: 100% trên mỗi bảng và đặt kiểu width trên mỗi ô trong hàng đầu tiên (hoặc, tốt hơn <col> s) mà bạn không muốn chia sẻ một tỷ lệ bằng nhau của chiều rộng bố cục.

(Bạn nên sử dụng table-layout: fixed bất cứ khi nào có thể, vì nó nhanh hơn để hiển thị và có thể dự đoán được nhiều hơn thuật toán bố cục bảng tự động, đặc biệt là trong IE, có một chút thực hiện sai lầm đặc biệt khi bạn sử dụng colspan.)

Answer 2

nói chung tôi sẽ có 4 hàng cho tiêu đề thể hiển thị thực tế ( ví dụ này là dữ liệu quốc gia) và chỉ 3 cột từ tiêu đề bị ẩn (hàng đầu tiên, vv giây).

thead chỉ nên bao gồm các tiêu đề thực tế, tức là "Quốc gia - dân số - Khu vực - Ngôn ngữ chính thức" Phần còn lại là dữ liệu và thuộc về tbody.

Những gì bạn đã gắn nhãn "Hàng đầu tiên, hàng thứ hai ..." là các cột, không phải hàng. Dường như bạn đang cố ẩn tất cả các hàng sau hàng đầu tiên. bảng của bạn sẽ giống như thế này:

<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> 

Và bạn có thể ẩn tất cả các hàng sau khi người đầu tiên với một cái gì đó như thế này (giả sử họ bắt đầu ẩn):

$('#tableToggle').toggle(
    function() { 
     $(this).nextAll().show(); 
    }, 
    function() { 
     $(this).nextAll().hide(); 
    }); 

Nếu bạn có nhiều hơn một phần hideable trong chuỗi trong cùng một bảng sử dụng

$(this).nextAll().slice(0, n).show(); 

trong đó n là số hàng trong một phần. Hoặc bạn chỉ có thể sử dụng một bảng mới cho từng phần ẩn.

Những thông tin này bên trong đã 1 hàng là một URL đó có thể là bất cứ nơi nào từ 10 ký tự từ hơn 100 (100 là phổ biến) mà kết quả trong toàn bộ màn hình thay đổi và các tiêu đề của tôi trở thành 2 hoặc 3 dòng.

Tôi không hiểu bạn đang nói gì ở đây, nhưng có vẻ như có thể giải quyết bằng cách kiểm soát kích thước của bảng trong bảng định kiểu của bạn.