JQuery 隐藏 table 列

Question

我试图在加载内容后隐藏 html table 的特定列。 Table 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 列未隐藏。

Answer 1

不要相信 Deferreds 来确定 DOM 元素何时被绘制到屏幕上。由于您使用的是 let，我假设您可以像 onanimationstart 一样使用现代 JavaScript。您可以将其与 CSS 动画一起使用，以确定 table 何时实际绘制。

@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 的一个旧博客 post 上学到了这个技巧（他也在那个页面上提到了其他一些博主）。

JQuery 隐藏 table 列

JQuery hide table column

javascript

jquery

html-table

show-hide