Saya telah membuat tabel di ASPX. Saya ingin menyembunyikan salah satu kolom berdasarkan persyaratan tetapi tidak ada atribut seperti visiblepada pembuatan tabel HTML. Bagaimana saya bisa mengatasi masalah saya?
Saya telah membuat tabel di ASPX. Saya ingin menyembunyikan salah satu kolom berdasarkan persyaratan tetapi tidak ada atribut seperti visiblepada pembuatan tabel HTML. Bagaimana saya bisa mengatasi masalah saya?
Jawaban:
Anda perlu menggunakan Style Sheet untuk tujuan ini.
<td style="display:none;">
td:first-child { display:none; }
Anda dapat menggunakan nth-childpemilih CSS untuk menyembunyikan seluruh kolom:
#myTable tr > *:nth-child(2) {
display: none;
}
Ini bekerja dengan asumsi bahwa sel kolom N (baik itu a thatau td) selalu merupakan elemen turunan ke-N dari barisnya.
Jika Anda ingin nomor kolom menjadi dinamis, Anda dapat melakukannya menggunakan querySelectorAllatau kerangka kerja apa pun yang menyajikan fungsionalitas serupa, seperti di jQuerysini:
$('#myTable tr > *:nth-child(2)').hide();
(Solusi jQuery juga berfungsi pada browser lama yang tidak mendukungnth-child ).
Anda juga bisa menggunakan:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">
Perbedaan di antara mereka yang "tersembunyi" menyembunyikan sel tetapi menahan ruang tetapi dengan "menutup" ruang tidak diadakan seperti tampilan: tidak ada. Ini penting saat menyembunyikan seluruh kolom atau baris.
visibility: collapsedirancang khusus untuk menangani sel yang menunjukkan / menyembunyikan, karena ada perbedaan saat menghitung ulang lebar / tinggi sel antara ini dan display:none. Lihat developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Jawaban Kos hampir benar, tetapi dapat memiliki efek samping yang merusak. Ini lebih benar:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}
CSS (Cascading Style Sheets) akan kaskade atribut untuk semua anak-anaknya. Ini berarti itu *:nth-child(1)akan menyembunyikan yang pertama tddari setiap tr DAN menyembunyikan elemen pertama dari semua tdanak. Jika salah satu dari Anda tdmemiliki hal-hal seperti tombol, ikon, input, atau pilihan, yang pertama akan disembunyikan (woops!).
Bahkan jika Anda tidak saat ini memiliki hal-hal yang akan disembunyikan, gambar frustrasi Anda di jalan jika Anda perlu untuk menambahkan satu. Jangan menghukum diri Anda di masa depan seperti itu, itu akan merepotkan untuk di-debug!
Jawaban saya hanya akan menyembunyikan pertama tddan thpada semua trdi #myTablemenjaga elemen lain yang aman.
Orang-orang bootstrap menggunakan .hiddenkelas di <td>.
Anda juga dapat menyembunyikan kolom menggunakan elemen col https://developer.mozilla.org/en/docs/Web/HTML/Element/col
Untuk menyembunyikan kolom kedua dalam tabel:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>
Masalah umum: ini tidak akan berfungsi di Google Chrome. Silakan pilih bug di https://bugs.chromium.org/p/chromium/issues/detail?id=174167
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>gunakan .hideFullColumn dalam tabel dan .hidecol di th. Anda tidak perlu menambahkan kelas di td secara individual karena akan menjadi masalah karena indeks mungkin tidak memikirkan setiap td.
Anda juga dapat melakukan apa yang disarankan vs dev secara terprogram dengan menetapkan gaya dengan Javascript dengan melakukan iterasi melalui kolom dan menyetel elemen td pada indeks tertentu untuk memiliki gaya tersebut.
<!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);