पंक्तियों

Question

के साथ "सामान्यीकृत" HTML तालिका पंक्तियों के उपयोग से HTML तालिका को सामान्यीकृत किया जा सकता है या नहीं, यह निर्धारित करने या गणना करने का कोई तरीका है? या यदि कोई जावास्क्रिप्ट लाइब्रेरी है जो इसे कर सकती है।

जैसे, इस तालिका:

+-----------+---------+ 
| Apple  | Red  | 
| Apple  | Green | 
| Apple  | Yellow | 
| Sun  | Yellow | 
| Sun  | Hot  | 
| Charizard | Hot  | 
| Charizard | Pokémon | 
+-----------+---------+ 

इस में बदल जाएगा:

+-----------+---------+ 
| Apple  | Red  | 
|   | Green | 
|   |---------| 
|-----------| Yellow | 
| Sun  |-------- | 
|-----------| Hot  | 
|   |---------| 
| Charizard | Pokémon | 
+-----------+---------+ 

इस बेला में देखो देखने के लिए मैं क्या मतलब है: http://jsfiddle.net/scorch/LZKkQ/

इन संयोजनों में से कुछ के लिए आसान कर रहे हैं मैन्युअल रूप से पता लगाने के लिए, लेकिन कुछ काफी जटिल हो सकते हैं। मैं जितना संभव हो सके तालिका को कम करना चाहता हूं, और सुनिश्चित करें कि कोई अन्य संयोजन नहीं है जो इसे और कम कर सकता है। यानी, तालिका में अधिमानतः केवल अद्वितीय मूल्य।

संपादित करें: पहेली में अतिरिक्त कॉलम को कभी भी ध्यान न दें। लगता है कि फ़ायरफ़ॉक्स में सही-कॉलम पर पंक्तियों के साथ कुछ समस्याएं हैं, इसलिए मुझे वांछित प्रभाव रखने के लिए एक और जोड़ना पड़ा।

संपादित 2:

DataTables प्लगइन fnMultiRowspan और fnFakeRowspan नीचे उल्लेख वास्तव में वांछित परिणाम नहीं मिलता है। दोनों प्लगइन्स को पहले से काम करने के लिए सही तरीके से सॉर्ट करने के लिए टेबल की आवश्यकता होती है; fnFakeRowspan केवल एक स्तंभ पर काम करता है और fnMultiRowspan नीचे (गर्म और पीले दूसरे कॉलम में दोहराया गया है) परिणाम देता है:

+-----------+---------+ 
|   | Red  | 
| Apple  | Green | 
|   | Yellow | 
|-----------+---------| 
| Charizard | Hot  | 
|   | Pokémon | 
|-----------+---------| 
| Sun  | Yellow | 
|   | Hot  | 
+-----------+---------+ 

Answer 1

@MahmoudGamal टिप्पणी में ऊपर कहा गया है, वहाँ DataTables कहा जाता है jQuery के लिए प्लग में है कि योग्य हो सकता है। की जाँच करें fnFakeRowspan समारोह:

जब वहाँ एक ही सामग्री के साथ एक पंक्ति में दो या अधिक कोशिकाएं होती हैं एक कॉलम में रोस्पेन कोशिकाओं बनाता है, प्रभावी रूप से उन्हें एक साथ नेत्रहीन समूहीकरण। नोट - यह प्लग-इन वर्तमान में केवल सर्वर-साइड प्रसंस्करण के साथ सही ढंग से कार्य करता है।

त्वरित कोड पढ़ने के आधार पर, ऐसा लगता है कि आप एक कॉलम निर्दिष्ट करते हैं, फिर यह डुप्लिकेट की तलाश करता है, और आवश्यकतानुसार कोशिकाओं को जोड़ता है। (नोट: मैंने इस कोड को स्वयं नहीं किया है।)

Answer 2

यदि आप पर्याप्त जावास्क्रिप्ट को समझते हैं तो इसे स्वयं लिखना आसान होगा। आपको बस इतना करना है कि अगली स्ट्रिंग वर्तमान स्ट्रिंग के समान है और फिर इसे दो बार प्रिंट करने के बजाय केवल एक की ऊंचाई बढ़ाने के लिए है।

संपादित करें: तो आप इसे पसंद

+-----------+---------+ 
| Apple  | Red  | 
| Pokémon | Green | 
| Sun  | Yellow | 
| Charizard | Hot  | 
+-----------+---------+