ซ่อน / แสดงคอลัมน์ในตาราง 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>

2
ฉันหวังว่าไซต์ folowing จะช่วย: fiendish.demon.co.uk/html/javascript/hidetablecols.html

ฉันใช้โซลูชันนี้โดยใช้ jQuery และทำงานได้อย่างสมบูรณ์แบบสำหรับฉัน: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
Aaron

1
ต่อความคิดเห็น user344059 ของที่นี่เป็นที่เก็บเว็บสำหรับการเชื่อมโยงเสียhttp://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

คำตอบ:


84

ฉันต้องการทำสิ่งนี้โดยไม่ต้องแนบชั้นเรียนกับทุกวัน

ส่วนตัวฉันจะไปกับวิธีการเรียนแบบตัวต่อตัว -dd / th / col จากนั้นคุณสามารถเปิดและปิดคอลัมน์โดยใช้การเขียนหนึ่งครั้งไปยัง className บนคอนเทนเนอร์โดยสมมติว่ากฎสไตล์เช่น

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

นี่จะเร็วกว่าวิธีวนรอบ JS ใด ๆ สำหรับตารางที่ยาวมาก ๆ มันสามารถสร้างการตอบสนองที่แตกต่าง

หากคุณไม่อยู่ในสภาพที่ไม่รองรับ IE6 คุณสามารถใช้ adjacency selectors เพื่อหลีกเลี่ยงการเพิ่ม class class ให้กับ tds หรืออีกวิธีหนึ่งหากข้อกังวลของคุณคือการทำให้มาร์กอัปสะอาดขึ้นคุณสามารถเพิ่มพวกเขาจาก JavaScript โดยอัตโนมัติในขั้นตอนการเริ่มต้น


7
ขอบคุณสำหรับคำแนะนำฉันต้องการรักษา HTML ให้สะอาดอยู่เสมอ แต่ประสิทธิภาพกลายเป็นปัญหาเมื่อขนาดของตารางใกล้ 100 แถว โซลูชันนี้มีการปรับปรุงประสิทธิภาพ 2-5x
ไบรอันฟิชเชอร์

2
วิธีการนี้ใช้งานได้ดีกับฉัน ขอบคุณ!
axelarge

4
ฉันเพิ่มสิ่งนี้ลงใน css ของฉัน.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/


หากคุณต้องการดูกรณีการใช้งานที่ดีลองดูที่โพสต์บล็อกของฉัน:

ซ่อนคอลัมน์ตารางและแถว Colorize ขึ้นอยู่กับค่ากับ jQuery


1
นอกเหนือจากที่พวกเขาไม่ได้อยู่ในตัวอย่างไม่มีปัญหาที่ไม่สนใจ colspans? ดีถ้าคุณไม่ได้ใช้มัน มีคำถามอีกข้อที่เกี่ยวข้อง: stackoverflow.com/questions/1166452/…
Kim R

2
ฉันต้องเพิ่ม tbody ให้กับตัวเลือกเพื่อหลีกเลี่ยงการซ่อนส่วนท้ายด้วยเพจเจอร์: $ ('. webgrid tbody td: nth-child (1), .webgrid th: n-child (1)'). ซ่อน ();
Alex

@KimR สิ่งนี้อาจเป็นประโยชน์สำหรับ colspan ประเด็นstackoverflow.com/questions/9623601/…
yunzen

ฉันไม่รู้ว่าทำไม แต่ฉันต้องใช้ 'nth-of-type' แทนเพื่อให้มันใช้งานได้ ตัวอย่างเช่น: $ ('table td: nth-of-type (2)'). hide ();
Leopoldo Sanczyk

@LeopoldoSanczyk คุณใช้ Safari อยู่หรือไม่ ดูเหมือนว่ามันต้องการ nth-of-type
ykay พูดว่า Reinstate Monica

12

คุณสามารถใช้ colgroups:

<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>คลาสความปรารถนา


ฉันดูเหมือนจะจำได้ว่า colgroup ที่ไม่มีการสนับสนุนข้ามเบราว์เซอร์นั้นไม่จริงอีกต่อไป?
Brian Fisher

อาจจะ. ฉันใช้วิธีนี้สำหรับคอลัมน์ hilight (firefox, safari, chrome ทำงานได้ดี) ไม่เคยลองใน IE
Luis Melgratti

@Brian - IE8 ไม่ทำงานและ IE8 ที่เปิดใช้งาน IE7 ดูเหมือนว่าจะทำงานได้
Nordes

4
ดูเหมือนว่าจะไม่ทำงานอีกต่อไปในเบราว์เซอร์สมัยใหม่ (Chrome และ Firefox)
JBE

@JBE: เพื่อความแม่นยำนี่จะทำงานในเบราว์เซอร์รุ่นใหม่ในระดับหนึ่ง เมื่อใช้$('table > colgroup > col.yourClassHere')ตัวเลือก jQuery คุณยังคงสามารถตั้งค่า smth เช่นสีพื้นหลังของทั้งคอลัมน์ได้ แต่คุณจะไม่สามารถสลับการมองเห็นคอลัมน์ได้อีกต่อไป เบราว์เซอร์ได้รับการทดสอบเป็น MSIE 11 , Safari 5 , โครเมี่ยม44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 "ส่วนใหญ่ของคุณลักษณะใน HTML 4.01 จะไม่ได้รับการสนับสนุนใน HTML5" - ดูที่นี่
เบส

11

ต่อไปนี้ควรทำ:

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

นี่เป็นรหัสที่ยังไม่ทดลอง แต่หลักการคือคุณเลือกเซลล์ตารางในแต่ละแถวที่สอดคล้องกับดัชนีที่เลือกที่แยกออกมาจากชื่อช่องทำเครื่องหมาย แน่นอนคุณสามารถ จำกัด ตัวเลือกด้วยคลาสหรือ ID


11

ต่อไปนี้เป็นคำตอบที่โดดเด่นกว่าเดิมเล็กน้อยซึ่งให้การโต้ตอบกับผู้ใช้บางรายการในแต่ละคอลัมน์ หากนี่จะเป็นประสบการณ์แบบไดนามิกจำเป็นต้องมีการสลับที่คลิกได้ในแต่ละคอลัมน์ที่ระบุความสามารถในการซ่อนคอลัมน์และจากนั้นวิธีการคืนค่าคอลัมน์ที่ซ่อนไว้ก่อนหน้านี้

ที่จะมีลักษณะเช่นนี้ใน JavaScript:

$('.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>

นั่นคือฟังก์ชั่นพื้นฐาน นี่คือตัวอย่างด้านล่างโดยมีข้อมูลอีกสองอย่าง นอกจากนี้คุณยังสามารถเพิ่มคำแนะนำเครื่องมือไปที่ปุ่มเพื่อช่วยอธิบายจุดประสงค์จัดรูปแบบปุ่มเพิ่มเติมให้กับส่วนหัวของตารางได้เล็กน้อยและยุบความกว้างของคอลัมน์เพื่อเพิ่มภาพเคลื่อนไหว css บางส่วน น่ากลัว

Screengrab สาธิต

สาธิตการทำงานในjsFiddle & Stack Snippets:


คุณกำลังซ่อนคอลัมน์ที่ใกล้ที่สุด 1 วิธีจะซ่อน 3 คอลัมน์ที่ใกล้ที่สุดได้อย่างไร
Nirmal Goswami

ตรวจสอบตารางของฉัน - i.stack.imgur.com/AA8iZ.png และคำถามที่มีตาราง html - stackoverflow.com/questions/50838119/…ปุ่มจะมาหลังจาก A, B และ C
Nirmal Goswami

ขออภัยที่จะฟื้นคำตอบเก่า แต่มีวิธีง่ายๆในการตั้งค่าคอลัมน์บางคอลัมน์ให้ซ่อนโดยค่าเริ่มต้นหรือไม่ ฉันกำลังพยายามทำ$(document).readyแต่ไม่มีโชค
RobotJohnny

1
@ RobotJohnny เป็นคำถามที่ดี นี่คือการใช้คลาส.hide-colเพื่อลบคอลัมน์ แต่ก็สามารถใช้เพื่อระบุสถานะได้เช่นกันดังนั้นคุณสามารถ - เพิ่ม.hide-colในแต่ละtd& trเมื่อแสดง html และทำได้ หรือถ้าคุณต้องการที่จะเพิ่มมันในสถานที่ที่น้อยลงให้ใส่ไว้ในส่วนหัว (สถานะนั้นจะต้องไปที่ไหนสักแห่ง) และใน init ให้ใช้สิ่งนั้นเพื่อซ่อนดัชนีคอลัมน์ในเด็ก ๆ ขณะนี้รหัสกำลังฟังตำแหน่งที่คลิก แต่อาจแก้ไขเพื่อค้นหาตำแหน่งคลาสได้เช่นกัน นอกจากนี้วันไก่งวงที่มีความสุข
KyleMit

1
@RobotJohnny ฉันได้อัปเดตโค้ดตัวอย่างเพื่อรวมการจัดการการเริ่มต้นด้วย เพียงวางclass='hide-col'ที่ใดก็ได้ที่คุณต้องการใน html ของคุณ (อาจจะthead > tr > thทำให้เหมาะสมที่สุดและมันจะรับเพื่อให้แน่ใจว่ามันซ่อนเซลล์ทั้งหมดในคอลัมน์นั้นและแสดงส่วนท้ายของการคืนค่าแบบไดนามิก
KyleMit

4

และแน่นอน CSS สำหรับเบราว์เซอร์ที่รองรับเท่านั้น 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;}

ฯลฯ...


2

ต่อไปนี้เป็นการสร้างรหัสของ Eran โดยมีการเปลี่ยนแปลงเล็กน้อย ทดสอบและดูเหมือนว่าจะทำงานได้ดีบน Firefox 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>

0

โดยไม่ต้องเรียน? คุณสามารถใช้แท็กแล้ว:

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

และเพื่อแสดงให้พวกเขาใช้:

...style.display = 'table-cell';            
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.