Làm cách nào để có được cột bảng tương ứng (td) từ tiêu đề bảng (th)?

Question

Tôi muốn lấy toàn bộ cột của tiêu đề bảng.

Ví dụ: tôi muốn chọn tiêu đề bảng "Địa chỉ" để ẩn cột địa chỉ và chọn tiêu đề "Điện thoại" để hiển thị cột tương ứng.

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

tôi muốn làm một cái gì đó giống như http://www.google.com/finance?q=apl (xem bảng các công ty liên quan) (nhấp vào liên kết "thêm hoặc xoá cột")

Answer 1

Cách đơn giản nhất để làm điều này sẽ để thêm một lớp vào từng td phù hợp với lớp của tiêu đề. Khi bạn nhấp vào, nó sẽ kiểm tra lớp, sau đó ẩn mọi td với lớp đó. Vì chỉ có s trong cột đó sẽ ẩn lớp đó, nó sẽ ẩn cột một cách hiệu quả.

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

Và kịch bản gì đó như:

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

Something như thế, dù sao. Đó có lẽ là tiết tấu hơn là cần thiết, nhưng nó phải chứng minh nguyên tắc.

Một cách khác sẽ chỉ đơn giản là đếm số lượng cột vượt quá câu hỏi được đề cập, sau đó lặp qua từng hàng và ẩn td cũng có nhiều cột hơn. Ví dụ, nếu bạn muốn ẩn cột Address và nó là cột # 3 (chỉ số 2), thì bạn sẽ lặp qua từng hàng và ẩn thứ ba (chỉ số 2).

Chúc may mắn ..

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

Something như thế này sẽ làm việc -

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

Đoạn mã trên sẽ ẩn cột liên quan nếu bạn nhấp vào tiêu đề, logic có thể được thay đổi cho phù hợp với yêu cầu của bạn mặc dù.

Demo - http://jsfiddle.net/LUDWQ/

Answer 4

đây là một fiddle làm việc của hành vi này:

http://jsfiddle.net/tycRW/

tất nhiên, ẩn cột với ra ẩn tiêu đề cho nó sẽ có một số kết quả kỳ lạ.

Answer 5

Với một vài thay đổi đơn giản để HTML của bạn, tôi muốn làm một cái gì đó như sau (JS framework-less):

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> 

Javascript:

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/

Tôi đã thêm các hộp kiểm vì nó không có ý nghĩa để ràng buộc nhấp chuột vào tiêu đề cột vì bạn sẽ không thể chuyển đổi chế độ hiển thị, chỉ ẩn chúng.

Answer 6

Bạn có thể làm điều gì đó với CSS, như:

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

Để ẩn một cột, bạn thêm với Javascript lớp tương ứng vào bảng. Ở đây c2 và c3 bị ẩn.

Bạn có thể thêm động .c1, .c2, ... vào thẻ kiểu hoặc xác định số lượng tối đa.

Answer 7

Mô phỏng Google Finance cột show/hide chức năng:

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; 
});