JQuery скрыть столбец таблицы - PullRequest
Новая
       42

JQuery скрыть столбец таблицы

0 голосов
/ 16 марта 2020

Я пытаюсь скрыть указанный c столбец таблицы 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-й столбец не скрыт.

1 Ответ

1 голос
/ 16 марта 2020

Не доверяйте 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 -трюках. com (он также упоминает несколько других блоггеров на этой странице).

...