HTML तालिका में कॉलम छिपाएँ / दिखाएँ

146

मेरे पास कई स्तंभों के साथ एक HTML तालिका है और मुझे jquery का उपयोग करके एक स्तंभ चयनकर्ता को लागू करने की आवश्यकता है। जब कोई उपयोगकर्ता चेकबॉक्स पर क्लिक करता है तो मैं तालिका में संबंधित कॉलम को छिपाना / दिखाना चाहता हूं। मैं तालिका में हर td के लिए एक क्लास संलग्न किए बिना ऐसा करना चाहूंगा, क्या jquery का उपयोग करके पूरे कॉलम का चयन करने का एक तरीका है? नीचे HTML का एक उदाहरण है।

<table>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
jquery  html  hide  html-table  show 
— ब्रायन फिशर
स्रोत
2
मुझे आशा है कि
मैंने jQuery का उपयोग करके इस समाधान को लागू किया, और इसने मेरे लिए पूरी तरह से काम किया: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
— हारून
1
User344059 की टिप्पणी के अनुसार, यहाँ टूटी लिंक के लिए वेब संग्रह है http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
— काइलमिट

जवाबों:

84

मैं हर td में एक क्लास अटैच किए बिना ऐसा करना चाहूंगा

व्यक्तिगत रूप से, मैं कक्षा-पर-प्रत्येक-td / th / col दृष्टिकोण के साथ जाऊंगा। फिर आप शैली पर नियम मानकर, कंटेनर पर क्लासनेम पर एकल लेखन का उपयोग करके कॉलम को चालू और बंद कर सकते हैं:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

यह किसी भी जेएस लूप दृष्टिकोण से तेज होने जा रहा है; वास्तव में लंबी तालिकाओं के लिए यह जवाबदेही के लिए एक महत्वपूर्ण अंतर बना सकता है।

यदि आप IE6 का समर्थन नहीं करने के साथ दूर हो सकते हैं, तो आप क्लास विशेषताओं को tds में जोड़ने से बचने के लिए आसन्न चयनकर्ताओं का उपयोग कर सकते हैं। या वैकल्पिक रूप से, यदि आपकी चिंता मार्कअप क्लीनर बना रही है, तो आप उन्हें एक प्रारंभिक चरण में जावास्क्रिप्ट से स्वचालित रूप से जोड़ सकते हैं।

— bobince
स्रोत
7
सलाह के लिए धन्यवाद, मैं HTML क्लीनर रखना चाहता था, लेकिन प्रदर्शन निश्चित रूप से एक मुद्दा बन गया क्योंकि तालिका का आकार 100 पंक्तियों तक पहुंच गया था। यह समाधान, 2-5x प्रदर्शन सुधार प्रदान करता है।
— ब्रायन फिशर
2
इस दृष्टिकोण ने मेरे लिए, प्रदर्शन के लिहाज से अद्भुत काम किया। धन्यवाद!
— axelarge
4
मैंने इसे अपने सीएसएस में जोड़ा .hidden {display:none;}और इस्तेमाल किया .addClass('hidden')और .removeClass('hidden')जो थोड़ा तेज था .hide()और .show()।
— स्टाइल डेफ
247

JQuery का उपयोग करके कोड की एक पंक्ति जो 2 कॉलम छुपाती है: 

$('td:nth-child(2)').hide();

यदि आपकी तालिका में शीर्षलेख (th) है, तो इसका उपयोग करें:

$('td:nth-child(2),th:nth-child(2)').hide();

स्रोत: jQuery कोड की एकल पंक्ति के साथ एक तालिका स्तंभ छिपाएँ

jsFiddle कोड का परीक्षण करने के लिए: http://jsfiddle.net/mgMem/1/

यदि आप एक अच्छा उपयोग मामला देखना चाहते हैं, तो मेरे ब्लॉग पोस्ट पर एक नज़र डालें:

तालिका स्तंभ छिपाएँ और jQuery के साथ मान के आधार पर पंक्तियों को रंगीन करें ।

— लेनियल मैकाफेर्री
स्रोत
1
उदाहरण के रूप में वे एक तरफ के रूप में, वहाँ एक मुद्दा नहीं है कि इस colspans की अनदेखी करता है? यदि आप उन्हें उपयोग नहीं कर रहे हैं तो अच्छा है। इससे संबंधित एक और प्रश्न है: stackoverflow.com/questions/1166452/…
— किम आर
2
मुझे पेजर के साथ पाद छिपाने से बचने के लिए चयनकर्ता में tbody को जोड़ना पड़ा: $ ('। webgrid tbody td: nth-child (1), .webgrid th: nth-child (1)')) Hide ();
— एलेक्स
@KimR इससे कोल्प्सन मुद्दों के लिए मदद मिल सकती है stackoverflow.com/questions/9623601/…
— yunzen
मुझे ठीक-ठीक पता नहीं है, लेकिन मुझे काम करने के लिए 'nth-of-type' का उपयोग करना पड़ा। उदाहरण के लिए: $ ('तालिका td: nth-of-type (2)')। Hide ();
— लियोपोल्डो सैंसिएक
@LeopoldoSanczyk आप सफारी का उपयोग कर रहे थे? ऐसा लगता है कि इसे nth-of-type की जरूरत है
— ykay का कहना है कि मोनिका
12

आप कोलग्रुप्स का उपयोग कर सकते हैं:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
    </thead>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
    <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

आपकी स्क्रिप्ट तब सिर्फ इच्छा <col>वर्ग बदल सकती है ।

— लुइस मेलग्रेट्टी
स्रोत
मुझे लगता है कि कॉलगर्ल को क्रॉस ब्राउजर सपोर्ट न होना याद है, क्या यह अब सच नहीं है?
— ब्रायन फिशर
शायद। मैं hilight कॉलम के लिए इस विधि का उपयोग कर रहा हूँ, (फ़ायरफ़ॉक्स, सफारी, क्रोम ठीक काम करता है) कभी भी IE में कोशिश नहीं की।
— लुइस मेलग्रेट्टी
@ ब्रायन - IE8 काम नहीं करता है और IE7 सक्षम IE7 के साथ काम करने लगता है।
— नॉर्ड्स
4
ऐसा लगता है कि आधुनिक ब्राउज़र (क्रोम और फ़ायरफ़ॉक्स) में अब काम नहीं कर रहा है
— जेबीई
@ जेबीई: सटीक होने के लिए, यह कुछ हद तक आधुनिक ब्राउज़रों में काम करता है । JQuery चयनकर्ता का उपयोग करके , आप अभी भी पूरे कॉलम की पृष्ठभूमि के रंग की तरह ही सेट कर सकते हैं, लेकिन आप कॉलम दृश्यता को टॉगल करने में सक्षम नहीं हैं। ब्राउज़रों का परीक्षण किया गया MSIE 11 , Safari 5 , Chromium 44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 । "HTML 4.01 में अधिकांश विशेषताएँ HTML5 में समर्थित नहीं हैं" - यहाँ देखें । $('table > colgroup > col.yourClassHere')
— बैस
11

निम्नलिखित इसे करना चाहिए:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

यह अनुपयोगी कोड है, लेकिन सिद्धांत यह है कि आप प्रत्येक पंक्ति में तालिका सेल का चयन करते हैं जो चेकबॉक्स नाम से निकाले गए चुने हुए सूचकांक से मेल खाती है। आप निश्चित रूप से चयनकर्ताओं को एक वर्ग या एक आईडी के साथ सीमित कर सकते हैं।

— एरण गैलपरिन
स्रोत
11

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

यह जावास्क्रिप्ट में कुछ इस तरह दिखेगा:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

इसका समर्थन करने के लिए, हम तालिका में कुछ मार्कअप जोड़ेंगे। प्रत्येक कॉलम हेडर में, हम कुछ क्लिक करने योग्य का दृश्य संकेतक प्रदान करने के लिए इस तरह से कुछ जोड़ सकते हैं

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

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

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

यही बुनियादी कार्यक्षमता है। यहाँ एक डेमो नीचे कुछ और चीजों के साथ बाहर fleshed है। आप इसके उद्देश्य को स्पष्ट करने में मदद करने के लिए बटन के लिए एक टूलटिप भी जोड़ सकते हैं, बटन को टेबल हेडर पर थोड़ा और व्यवस्थित रूप से स्टाइल कर सकते हैं, और संक्रमण को थोड़ा कम करने के लिए कुछ (कुछ विजयी) सीएसएस एनिमेशन को जोड़ने के लिए कॉलम की चौड़ाई को घटा सकते हैं। उछल।

डेमो स्क्रेंबर्ग

कार्यशील jsFiddle और स्टैक स्निपेट्स में डेमो :

कोड स्निपेट दिखाएं

— KyleMit
स्रोत
आप निकटतम 1 कॉलम छिपा रहे हैं, निकटतम 3 कॉलम कैसे छिपाएं?
— निर्मल गोस्वामी
मेरी तालिका देखें - i.stack.imgur.com/AA8iZ.png और प्रश्न जिसमें तालिका html शामिल है - stackoverflow.com/questions/50838119/… बटन A, B और C के बाद आएगा
— निर्मल गोस्वामी
इस तरह के एक पुराने उत्तर को पुनर्जीवित करने के लिए खेद है, लेकिन क्या डिफ़ॉल्ट रूप से छिपे हुए कुछ कॉलम सेट करने का एक आसान तरीका है? मैं ऐसा करने की कोशिश कर रहा हूं, $(document).readyलेकिन कोई किस्मत वाला नहीं है
— रोबॉटजॉनी
1
@RobotJohnny, अच्छा सवाल। इस वर्ग का उपयोग कर रहा .hide-colस्तंभों को निकालने के लिए, लेकिन यह भी तो तुम सकता है या तो है, साथ ही राज्य इंगित करने के लिए इस्तेमाल किया जा सकता - जोड़ने के .hide-colप्रत्येक के लिए tdऔर trजब एचटीएमएल प्रतिपादन और किया जाना। या यदि आप इसे कम स्थानों पर जोड़ना चाहते हैं, तो इसे हेडर में डालें (उस स्थिति में कहीं जाना होगा), और init पर, उस कॉलम इंडेक्स को बच्चों में छिपाने के लिए उपयोग करें। वर्तमान में, कोड केवल क्लिक पर स्थिति के लिए सुन रहा है, लेकिन इसे श्रेणी स्थिति के लिए भी देखने के लिए संशोधित किया जा सकता है। इसके अलावा, खुश तुर्की दिन
— काइलमिट
1
@RobotJohnny, मैंने कोड नमूने को आरंभीकरण से निपटने के लिए भी शामिल किया। बस class='hide-col'अपने html में चाहते हैं कि कहीं भी ड्रॉप करें (शायद thead > tr > thसबसे अधिक समझ में आता है और यह सुनिश्चित करने के लिए
— उठाएगा
4

और निश्चित रूप से, सीएसएस केवल उन ब्राउज़रों के लिए रास्ता है जो समर्थन करते हैंnth-child :

table td:nth-child(2) { display: none; }

यह IE9 और नए के लिए है।

अपने usecase के लिए, आपको कॉलम छिपाने के लिए कई वर्गों की आवश्यकता होगी:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ect ...

— ProblemsOfSumit
स्रोत
2

निम्नलिखित एरन के कोड पर निर्माण कर रहा है, जिसमें कुछ मामूली बदलाव हैं। यह परीक्षण किया और यह फ़ायरफ़ॉक्स 3, IE7 पर ठीक काम करता है।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<table>
<thead>
    <tr>
        <th class="col1">Header 1</th>
        <th class="col2">Header 2</th>
        <th class="col3">Header 3</th>
    </tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>

<form>
    <input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
    <input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
    <input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
</body>
</html>
— पाओलो बर्गेंटिनो
स्रोत
1 
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>
— lahbib
स्रोत
0

बिना कक्षा के? आप टैग का उपयोग तब कर सकते हैं:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

और उन्हें उपयोग दिखाने के लिए:

...style.display = 'table-cell';
— गुस्तावो रुइज़
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.