[英]JQuery hide table column
我試圖在加載內容后隱藏 html 表的特定列。 表 html 是動態創建的並使用 JQuery 加載。 這部分按預期工作。
let cur_grid = document.getElementById('grid1') // table html is created. let str_tbl_html = '<table id="tbl_grid1"><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table>' $.when($(cur_grid).html(str_tbl_html)).done(function() { console.log('hide 3rd column') $('#tbl_grid1 tr td:nth-child(3)').hide() // also tried $('#tbl_grid1').find('td:nth-child(3)').hide() });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='grid1'></div>
我沒有收到任何錯誤,但第 3 列未隱藏。
不要相信 Deferreds 來確定何時將 DOM 元素繪制到屏幕上。 由於您使用的是let
我假設您可以使用現代 JavaScript,例如onanimationstart
。 您可以將其與 CSS 動畫一起使用來確定實際繪制表格的時間。
@keyframes any-animation {
from {opacity: 0.99;}
to {opacity: 1.0;}
}
table {
animation-name: any-animation;
animation-duration: 0.001s;
}
let cur_grid = document.getElementById('grid1')
// table html is created.
let str_tbl_html = '<table id="tbl_grid1" onanimationstart="hideThirdColumn()"><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr></tbody></table>'
function hideThirdColumn() {
$('#tbl_grid1 tr td:nth-child(3)').hide()
};
我在css-tricks.com上的一篇舊博客文章中學到了這個技巧(他在該頁面上也提到了其他一些博客作者)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.