मैं तालिका शीर्षलेख (वें) से संबंधित तालिका कॉलम (टीडी) कैसे प्राप्त कर सकता हूं?

Question

मैं एक टेबल हेडर का पूरा कॉलम प्राप्त करना चाहता हूं।

उदाहरण के लिए, मैं पता कॉलम छुपाने के लिए तालिका शीर्षलेख "पता" का चयन करना चाहता हूं, और संवाददाता कॉलम दिखाने के लिए "फ़ोन" शीर्षलेख का चयन करना चाहता हूं।

<table> 
<thead> 
    <tr> 
     <th id="name">Name</th> 
     <th id="address">Address</th> 
     <th id="address" class='hidden'>Address</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Freddy</td> 
     <td>Nightmare Street</td> 
     <td class='hidden'>123</td> 
    </tr> 
    <tr> 
     <td>Luis</td> 
     <td>Lost Street</td> 
     <td class='hidden'>3456</td> 
    </tr> 
</tbody> 

मैं http://www.google.com/finance?q=apl की तरह कुछ (संबंधित कंपनियों तालिका देखें) ("कॉलम जोड़ने या निकालने" लिंक पर क्लिक)

Answer 1

यह करने के लिए किया जाएगा सबसे आसान तरीका क्या करना चाहते हैं शीर्षलेख के वर्ग से मेल खाने वाले प्रत्येक टीडी में कक्षा जोड़ने के लिए। जब आप क्लिक करते हैं, तो यह कक्षा की जांच करता है, फिर उस कक्षा के साथ हर टीडी छुपाता है। चूंकि उस कॉलम में केवल उस वर्ग को छुपाएगा, यह प्रभावी रूप से कॉलम को छुपाएगा।

<table> 
    <thead> 
    <th>Name</th> 
    <th>Address</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="Name">Joe</td> 
     <td class="Address">123 Main St. 
    </tbody> 
</table> 

और तरह स्क्रिप्ट कुछ:

$('th').click(function() { 
    var col = $(this).html(); // Get the content of the <th> 
    $('.'+col).hide(); // Hide everything with a class that matches the col value. 
}); 

कुछ ऐसे ही, वैसे भी। यह संभवतः अधिक वर्बोज़ होने की आवश्यकता है, लेकिन इसे सिद्धांत का प्रदर्शन करना चाहिए।

एक और तरीका यह समझना होगा कि प्रश्न में कितने कॉलम हैं, और फिर प्रत्येक पंक्ति के माध्यम से लूप करें और टीडी को छुपाएं जो कि कई स्तंभ हैं। उदाहरण के लिए, यदि आप पता कॉलम छिपाना चाहते हैं और यह कॉलम # 3 (इंडेक्स 2) है, तो आप प्रत्येक पंक्ति के माध्यम से लूप करेंगे और तीसरे (इंडेक्स 2) को छुपाएंगे।

गुड लक ..

Answer 2

jQuery('thead td').click(function() { 

    var th_index = jQuery(this).index(); 

    jQuery('#my_table tbody tr').each(
     function(index) { 
      jQuery(this).children('td:eq(' + th_index + ');').each(
       function(index) { 
        // do stuff here 
       } 
      ); 
     } 
    ); 
}); 

Answer 3

कुछ इस तरह काम करेंगे -

$('th').click(function() { 
    var index = $(this).index()+1; 
    $('table td:nth-child(' + index + '),table th:nth-child(' + index + ')').hide() 
}); 

कोड के ऊपर प्रासंगिक स्तंभ यदि आप शीर्षक पर क्लिक छुपा देगा, तर्क सूट करने के लिए बदला जा सकता है हालांकि आपकी आवश्यकताओं।

डेमो - http://jsfiddle.net/LUDWQ/

Answer 4

यहाँ इस व्यवहार का एक काम बेला है:

http://jsfiddle.net/tycRW/

निश्चित रूप से

, बाहर हैडर छुपा साथ स्तंभ छिपाने यह कुछ अजीब परिणाम हो जाएगा।

Answer 5

अपने HTML एक जोड़े को सरल संशोधनों के साथ

, मैं निम्नलिखित (ढांचा कम जे एस) की तरह कुछ करना चाहते हैं:

HTML:

<input class="chk" type="checkbox" checked="checked" data-index="0">Name</input> 
<input class="chk" type="checkbox" checked="checked" data-index="1">Address</input> 
<input class="chk" type="checkbox" checked="checked" data-index="2">Phone</input> 

<table id="tbl"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Address</th> 
     <th>Phone</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Freddy</td> 
     <td>Nightmare Street</td> 
     <td>123</td> 
    </tr> 
    <tr> 
     <td>Luis</td> 
     <td>Lost Street</td> 
     <td>3456</td> 
    </tr> 
</tbody> 

जावास्क्रिप्ट:

var cb = document.getElementsByClassName("chk"); 
var cbsz = cb.length; 

for(var n = 0; n < cbsz ; ++n) { 
    cb[n].onclick = function(e) { 
     var idx = e.target.getAttribute("data-index"); 
     toggleColumn(idx); 
    } 
} 

function toggleColumn(idx) { 
    var tbl = document.getElementById("tbl"); 
    var rows = tbl.getElementsByTagName("tr"); 
    var sz = rows.length; 

    for(var n = 0; n < sz; ++n) { 
     var el = n == 0 ? rows[n].getElementsByTagName("th")[idx] : rows[n].getElementsByTagName("td")[idx]; 
     el.style.display = el.style.display === "none" ? "table-cell" : "none"; 
    } 
} 

http://jsfiddle.net/dbrecht/YqUNz/1/

मैंने चेकबॉक्स जोड़ दिए क्योंकि कॉलम हेडर पर क्लिक को बाध्य करने के लिए यह समझ में नहीं आता है क्योंकि आप दृश्यता को टॉगल करने में सक्षम नहीं होंगे, केवल उन्हें छुपाएं।

Answer 6

आप सीएसएस के साथ कुछ कर सकते हैं, जैसे:

<html> 
<head> 
    <style> 
     .c1 .c1, .c2 .c2, .c3 .c3{ 
      display:none; 
     } 
    </style> 
</head> 
<body> 
<table class="c2 c3"> 
    <thead> 
     <tr> 
      <th id="name" class="c1">Name</th> 
      <th id="address" class="c2">Address</th> 
      <th id="phone" class="c3">Phone</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="c1">Freddy</td> 
      <td class="c2">Nightmare Street</td> 
      <td class="c3">123</td> 
     </tr> 
     <tr> 
      <td class="c1">Luis</td> 
      <td class="c2">Lost Street</td> 
      <td class="c3">3456</td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html> 

किसी स्तंभ को छिपाने के लिए, आप मेज पर इसी वर्ग जावास्क्रिप्ट के साथ जोड़ें। यहां सी 2 और सी 3 छुपाए गए हैं।

आप एक शैली टैग में गतिशील रूप से .c1, .c2, ... जोड़ सकते हैं, या अधिकतम संख्या परिभाषित कर सकते हैं।

Answer 7

Google वित्त दिखाएँ/छिपाएँ कॉलम कार्यक्षमता का अनुकरण:

http://jsfiddle.net/b9chris/HvA4s/

$('#edit').click(function() { 
    var headers = $('#table th').map(function() { 
     var th = $(this); 
     return { 
      text: th.text(), 
      shown: th.css('display') != 'none' 
     }; 
    }); 

    var h = ['<div id=tableEditor><button id=done>Done</button><table><thead><tr>']; 
    $.each(headers, function() { 
     h.push('<th><input type=checkbox', 
       (this.shown ? ' checked ' : ' '), 
       '/> ', 
       this.text, 
       '</th>'); 
    }); 
    h.push('</tr></thead></table></div>'); 
    $('body').append(h.join('')); 

    $('#done').click(function() { 
     var showHeaders = $('#tableEditor input').map(function() { return this.checked; }); 
     $.each(showHeaders, function(i, show) { 
      var cssIndex = i + 1; 
      var tags = $('#table th:nth-child(' + cssIndex + '), #table td:nth-child(' + cssIndex + ')'); 
      if (show) 
       tags.show(); 
      else 
       tags.hide(); 
     }); 

     $('#tableEditor').remove(); 
     return false; 
    }); 

    return false; 
});