Làm thế nào để ẩn các cột trong bảng trong jQuery?

Question

Tôi đã có một bảng với nhiều cột. Tôi muốn cung cấp cho người dùng tùy chọn để chọn các cột được hiển thị trong bảng. Các tùy chọn này sẽ là hộp kiểm cùng với tên cột. Vậy làm thế nào tôi có thể ẩn/bỏ ẩn các cột trong bảng dựa trên các hộp kiểm?

Ẩn (sử dụng .hide()) mỗi td trong mỗi hàng có hoạt động không? Có thể tôi có thể gán giá trị hộp kiểm cho vị trí của cột trong bảng. Vì vậy, hộp kiểm đầu tiên có nghĩa là cột đầu tiên, v.v. Và sau đó đệ quy ẩn td 'đánh số' trong mỗi hàng. Liệu điều đó có hiệu quả?

Answer 1

Hãy thử:

function hideColumn(columnIndex) { 
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide(); 
} 

Đây là một phiên bản khá cơ bản - nó giả bảng của bạn không sử dụng <TH> yếu tố hoặc có nhịp cột biến, nhưng khái niệm cơ bản là ở đó. Lưu ý rằng nth-child uses 1-based indexing. Tôi đã thêm 1 ở giai đoạn mới nhất để bù đắp cho điều đó.

Answer 2

Tôi đã tạo một tập lệnh thực hiện những gì Rex gợi ý. Có một hộp kiểm (hoặc phần tử) trong mỗi cột, khi được nhấp, tìm ra cột nào dựa trên số thứ n và sau đó ẩn các cột giống nhau trong mỗi TR khác.

Trước .hide() Tôi muốn thêm một lớp mà tôi có thể tham chiếu để trả về cột.

Vấn đề tôi gặp phải là tôi đang làm việc với các bảng có nhiều kiểu dáng, trong đó một số hàng có colspans và một số TD có các lớp duy nhất dựa trên vị trí của chúng trong hàng. Tôi rant vào các vấn đề trong IE, nơi IE sẽ không luôn luôn hiển thị() các TD ẩn với phong cách thích hợp. Dường như IE gặp khó khăn khi vẽ lại TD.