15
Làm cách nào để ẩn thẻ <td> bằng JavaScript hoặc CSS nội tuyến?Làm cách nào để ẩn thẻ TD bằng JavaScript hoặc CSS nội tuyến?
A
Trả lời
17
gì bạn mong đợi xảy ra trong đó diễn ra? Bảng không thể reflow để lấp đầy không gian còn lại - điều này có vẻ như một công thức cho các phản ứng trình duyệt buggy.
Hãy suy nghĩ về ẩn nội dung của td, chứ không phải chính td.
7
Cùng theo cách bạn muốn che giấu bất cứ điều gì: visibility: hidden;
+1
gì về display: none; công việc vừa ý? (trình duyệt chéo vv). – Blankman
+1
hiển thị: không có gì trong kinh nghiệm của tôi những gì bạn thực sự muốn 95% thời gian – annakata
+0
Khả năng hiển thị ẩn phần tử mà không thay đổi dòng chảy của tài liệu và vì vậy nên tránh các loại vấn đề mà edeverett đang lo lắng. – Simon
36
.hide{
visibility: hidden
}
<td class="hide"/>
Edit- Chỉ cần cho bạn
Sự khác biệt giữa màn hình và tầm nhìn là thế này.
"hiển thị": có nhiều thuộc tính hoặc giá trị, nhưng những thuộc tính hoặc giá trị bạn đang tập trung vào là "không" và "chặn". "none" giống như giá trị ẩn và "chặn" giống như hiển thị. Nếu bạn sử dụng giá trị "không", bạn sẽ hoàn toàn ẩn thẻ html nào bạn đã áp dụng kiểu css này. Nếu bạn sử dụng "khối", bạn sẽ thấy thẻ html và nội dung của nó. rất đơn giản.
"mức hiển thị": có nhiều giá trị, nhưng chúng tôi muốn biết thêm về giá trị "ẩn" và "hiển thị". "ẩn" sẽ hoạt động giống như giá trị "chặn" để hiển thị, nhưng điều này sẽ ẩn thẻ và nội dung của thẻ, nhưng nó sẽ không ẩn không gian phisical của thẻ đó. Ví dụ, nếu bạn có một vài dòng văn bản, sau đó và hình ảnh (hình ảnh) và sau đó một bảng với ba cột và hai hàng với các biểu tượng và văn bản. Bây giờ nếu bạn áp dụng css hiển thị với giá trị ẩn cho hình ảnh, hình ảnh sẽ biến mất nhưng không gian hình ảnh đang sử dụng sẽ remaing ở vị trí của nó, nói cách khác, bạn sẽ kết thúc bằng một khoảng trống lớn (lỗ) giữa văn bản và cai ban. Bây giờ, nếu bạn sử dụng giá trị "hiển thị", thẻ mục tiêu của bạn và các phần tử của nó sẽ hiển thị lại.
4
Nếu bạn có nhiều điều này trong javascript, hãy xem xét một số thư viện javascript, ví dụ: jquery mất một chút tốc độ, nhưng cung cấp cho bạn mã dễ đọc hơn. đang
của Câu hỏi của bạn qua jquery:
$("td").hide();
Tất nhiên có những thư viện javascript khác trên mạng, như this comparison on wikipedia chương trình.
2
Bạn chỉ có thể ẩn các nội dung <td> thẻ bằng cách chỉ bao gồm một thuộc tính style: style = "display:none"
Đối với e.g
<td style = "display:none" >
<p> I'm invisible </p>
</td>
1
Chúng tôi có thể ẩn các nội dung bên trong một bằng css inline sau:
<div style="visibility:hidden"></div>
ví dụ:
<td><div style="visibility:hidden">Your Content Goes Here:</div></td>
6
<td style = "display:none" >
<p> Content display none </p>
</td>
hoặc
<td style="visibility:hidden"> Your content is hidden </td>
Lưu ý rằng: 2 cách đó khác nhau. Bạn nên thử nó để kiểm tra kết quả.
6
Mọi thứ đều có thể (hoặc hầu hết) với css, chỉ cần sử dụng:
display: none; //to hide
display: table-cell //to show
Tuy nhiên, có khoảng trống không mong muốn giữa các ô bị ẩn ngay cả khi chiều rộng được đặt thành 0. – Sednus