Tôi đã tạo một bảng trong ASPX. Tôi muốn ẩn một trong các cột dựa trên yêu cầu nhưng không có thuộc tính như visibletrong xây dựng bảng HTML. Làm thế nào tôi có thể giải quyết vấn đề của tôi?
Tôi đã tạo một bảng trong ASPX. Tôi muốn ẩn một trong các cột dựa trên yêu cầu nhưng không có thuộc tính như visibletrong xây dựng bảng HTML. Làm thế nào tôi có thể giải quyết vấn đề của tôi?
Câu trả lời:
Bạn cần sử dụng Style Sheet cho mục đích này.
<td style="display:none;">td:first-child { display:none; }
Bạn có thể sử dụng công nth-childcụ chọn CSS để ẩn toàn bộ cột:
#myTable tr > *:nth-child(2) {
display: none;
}Này hoạt động dưới giả định rằng một tế bào của cột N (có thể là một thhoặctd ) luôn là phần tử con thứ N của hàng của nó.
Nếu bạn muốn số cột là động, bạn có thể làm điều đó bằng cách sử dụng querySelectorAllhoặc bất kỳ khuôn khổ nào trình bày chức năng tương tự, như jQuerysau:
$('#myTable tr > *:nth-child(2)').hide();(Giải pháp jQuery cũng hoạt động trên các trình duyệt cũ không hỗ trợnth-child ).
bạn cũng có thể dùng:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">Sự khác biệt giữa chúng mà "hidden" sẽ ẩn ô nhưng nó giữ không gian nhưng với "thu gọn" thì không gian không được giữ như display: none. Điều này rất quan trọng khi ẩn toàn bộ cột hoặc hàng.
visibility: collapseđược thiết kế đặc biệt để xử lý việc hiển thị / ẩn ô, vì có sự khác biệt khi tính toán lại chiều rộng / chiều cao của ô giữa giá trị này và display:none. Xem developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Câu trả lời của Kos gần như đúng, nhưng có thể có tác dụng phụ gây hại. Điều này đúng hơn:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}CSS (Cascading Style Sheets) sẽ thác các thuộc tính cho tất cả các con của nó. Điều này có nghĩa là *:nth-child(1)sẽ ẩn phần tử đầu tiên tdcủa mỗi tr AND ẩn phần tử đầu tiên của tất cả các phần tử tdcon. Nếu bất kỳ thứ nào của bạn tdcó những thứ như nút, biểu tượng, đầu vào hoặc lựa chọn, cái đầu tiên sẽ bị ẩn (rất tiếc!).
Thậm chí nếu bạn không hiện có những thứ đó sẽ được ẩn, hình ảnh thất vọng của bạn xuống đường nếu bạn cần phải thêm một. Đừng trừng phạt bản thân tương lai của bạn như vậy, đó sẽ là một nỗi đau để gỡ rối!
Câu trả lời của tôi sẽ chỉ ẩn đầu tiên tdvà thtrên tất cả trtrong #myTableviệc giữ an toàn cho các yếu tố khác của bạn.
Bootstrap mọi người sử dụng .hiddenlớp trên <td>.
Bạn cũng có thể ẩn một cột bằng cách sử dụng phần tử col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
Để ẩn cột thứ hai trong bảng:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>Các sự cố đã biết: tính năng này sẽ không hoạt động trong Google Chrome. Vui lòng bỏ phiếu cho lỗi tại https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>sử dụng .hideFullColumn trong bảng và .hidecol trong th.Bạn không cần thêm lớp trong td riêng lẻ vì nó sẽ là vấn đề vì chỉ mục có thể không được ghi nhớ của mỗi td.
Bạn cũng có thể làm những gì so với dev đề xuất theo lập trình bằng cách gán kiểu với Javascript bằng cách lặp qua các cột và đặt phần tử td tại một chỉ mục cụ thể để có kiểu đó.
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);