Đây là một câu trả lời đầy đủ tính năng hơn cung cấp một số tương tác người dùng trên cơ sở mỗi cột. Nếu đây sẽ là một trải nghiệm động, cần phải có một nút chuyển đổi có thể nhấp trên mỗi cột cho biết khả năng ẩn cột và sau đó là cách khôi phục các cột bị ẩn trước đó.
Điều đó sẽ trông giống như thế này trong JavaScript:
$['.hide-column'].click[function[e]{
var $btn = $[this];
var $cell = $btn.closest['th,td']
var $table = $btn.closest['table']
// get cell location - //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[]
}]Để hỗ trợ điều này, chúng tôi sẽ thêm một số đánh dấu vào bảng. Trong mỗi tiêu đề cột, chúng ta có thể thêm một cái gì đó như thế này để cung cấp một chỉ báo trực quan về thứ gì đó có thể nhấp
Chúng tôi sẽ cho phép người dùng khôi phục các cột thông qua một liên kết trong phần chân trang. Nếu nó không liên tục theo mặc định, thì việc bật nó một cách linh hoạt trong tiêu đề có thể chen lấn quanh bàn, nhưng bạn thực sự có thể đặt nó ở bất cứ đâu bạn muốn:
Some columns hidden - click to show all
Đó là chức năng cơ bản. Đây là một bản demo dưới đây với một vài điều nữa. Bạn cũng có thể thêm một chú giải công cụ vào nút để giúp làm rõ mục đích của nó, định kiểu nút một cách hữu cơ hơn một chút cho tiêu đề bảng và thu gọn chiều rộng cột để thêm một số hình ảnh động css [hơi khó hiểu] để chuyển đổi ít hơn một chút tăng vọt.
Demo hoạt động trong jsFiddle & Stack Snippets:
4 hữu ích 5 bình luận chia sẻ