एकाधिक थैड/टोब डिज़ाइन

Question

मेरे पास उपयोगिता/डिज़ाइन के बारे में कोई प्रश्न है। मैं वर्तमान में कुछ क्षेत्रों को छुपाने/दिखाने के लिए कुछ JQuery का उपयोग कर रहा हूं। वर्तमान में ये सभी मुख्य हेडर के रूप में शीर्ष पर एक थैड के साथ एक बड़ी मेज में हैं, इसके बाद दूसरे थैड के बाद जो प्रदर्शित किया जाएगा उसका शीर्षलेख है। अगला एक और थैड है जो जो कुछ भी छुपा हुआ है उसका शीर्षलेख है जो किसी व्यक्ति में प्रदर्शित होता है। मुझे पता है कि यह भयानक शैली है, हालांकि जिस समस्या को मैं दूर करने की कोशिश कर रहा हूं वह है कि मैं सभी पंक्तियों को वही होना चाहता हूं क्योंकि वे सभी एक ही प्रकार के डेटा प्रदर्शित कर रहे हैं। , alt text http://img694.imageshack.us/img694/9773/screenshot20100708at100.png alt text http://img822.imageshack.us/img822/9206/screenshot20100708at101.png

अब कारण मैं वास्तव में यह इस तरह से किया जाता है, क्योंकि आम तौर पर मैं वास्तविक के लिए 4 पंक्तियों होगा:

कोड उदाहरण

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

नीचे क्या प्रदर्शित किया जाएगा है प्रदर्शित करने योग्य शीर्षलेख (यह उदाहरण देश डेटा है) और शीर्षलेख से केवल 3 कॉलम छुपाए जा रहे हैं (पहली पंक्ति, दूसरा आदि)। अंदर इस डेटा में 1 पंक्ति है एक यूआरएल जो 10 अक्षरों से 100+ (100+ आम है) से कहीं भी हो सकता है जिसके परिणामस्वरूप पूरे डिस्प्ले बदल रहे हैं और मेरे हेडर 2 या 3 लाइन बन रहे हैं। जबकि मैं चाहता था कि सभी पंक्तियों के लिए वही रहें, टेबल के अंदर 1 थैड के साथ केवल 1 टैब को जोड़ने का कोई तरीका है ताकि यह किसी अन्य को प्रभावित न करे। चूंकि यह शायद काफी उलझन में है, वास्तव में कई तालिकाओं के लिए एक बेहतर तरीका है, लेकिन प्रत्येक के थैड एक ही रहते हैं, चाहे डेटा के लिए डेटा डाला जाए। मुझे पता है कि प्रश्न होंगे लेकिन किसी भी मदद की सराहना की जाएगी और ध्यान दें कि मैं इसे अलग तरीके से करने के लिए पूरी तरह से खुला हूं। हालांकि क्या आवश्यक है कि डेटा छुपाया जा सकता है जो एक टेबल है और उस जानकारी के लिए एक शीर्षलेख होगा। एक प्रदर्शित करने योग्य खंड हो सकता है जिसे मिलान नहीं करना है (यह एक div हो सकता है) और प्रत्येक खंड के अंदर डेटा को एक ही प्रारूप रखना चाहिए।

पीएस: यदि नीचे रुचि है तो 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> 

Answer 1

एक तालिका में एकाधिक <thead> एस अवैध HTML है। आपके पास <thead> एस में मौजूद अधिकांश पंक्तियों में डेटा शीर्षक नहीं है, इसलिए <tbody> में होना चाहिए।

टेबल के अंदर 1 थैड के साथ केवल 1 टैब को जोड़ने का कोई तरीका है ताकि यह किसी अन्य को प्रभावित न करे।

हां, एक अलग तालिका का उपयोग करें।

यदि आप कॉलम चौड़ाई एक स्थिर आकार के रूप में सभी तरह से नीचे चाहते हैं ताकि टेबल एक दूसरे के साथ लाइन हो जाएं, प्रत्येक तालिका पर शैलियों table-layout: fixed; width: 100% सेट करें, और पहली पंक्ति में प्रत्येक कक्ष पर width शैलियों को सेट करें (या, बेहतर <col> एस) कि आप लेआउट चौड़ाई के बराबर अनुपात साझा नहीं करना चाहते हैं।

(जहां भी संभव हो table-layout: fixed का उपयोग करना एक अच्छा विचार है, क्योंकि यह ऑटो टेबल लेआउट एल्गोरिदम से विशेष रूप से आईई में प्रस्तुत करने के लिए तेज़ी से और अधिक अनुमानित है, जिसमें इसका थोड़ा गड़बड़ हो गया है, खासकर जब आप colspan इस्तेमाल करते हैं।)

Answer 2

आम तौर पर मैं वास्तविक प्रदर्शन योग्य हेडर के लिए 4 पंक्तियों होगा (इस उदाहरण देश डेटा है) और हैडर से केवल 3 कॉलम (प्रथम पंक्ति, दूसरा आदि छिपा हुआ जा रहा है)।"- जनसंख्या - क्षेत्र - राजभाषा देश" बाकी डेटा और tbody में अंतर्गत आता है

thead केवल वास्तविक शीर्षकों से, यानी शामिल होना चाहिए।

आपने "पहली पंक्ति, दूसरी पंक्ति ..." लेबल किए हैं, पंक्तियां नहीं हैं। ऐसा लगता है कि आप पहली पंक्ति के बाद सभी पंक्तियों को छिपाने की कोशिश कर रहे हैं। आपका टेबल इस तरह दिखना चाहिए:

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

और तुम कुछ इस तरह से पहले एक के बाद सभी पंक्तियों को छुपा सकते हैं (यह मानते हुए वे छिपा शुरू):

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

आप एक से अधिक hideable अनुभाग है, तो उसी तालिका में श्रृंखला में

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

जहां n एक वर्ग में पंक्तियों की संख्या है का उपयोग करें। या आप प्रत्येक छिपे हुए अनुभाग के लिए बस एक नई तालिका का उपयोग कर सकते हैं।

इस डेटा के अंदर 1 पंक्ति एक URL कि कहीं भी 10 पात्रों से हो सकता है 100 + करने के लिए (100 + आम है) जो पूरे प्रदर्शन बदलने में परिणाम है और मेरे हेडर 2 या 3 बनने लाइनों।

मुझे समझ में नहीं आता कि आप यहां क्या कह रहे हैं, लेकिन ऐसा लगता है कि बॉबिन के सुझाव के अनुसार आपकी स्टाइलशीट में तालिका के आयामों को नियंत्रित करके हल किया जा सकता है।