Как выбрать thead элемент из динамически построенной таблицы?

Question

У меня есть динамически построенная таблица в JavaScript / JQUERY.После построения таблицы мне нужно выбрать элемент thead.Вот пример моего кода:

$(document).ready(function(){
  buildTbl();
});

function buildTbl() {
  var tbl = '<table id="myTbl"><thead><tr><th>Column 1</th></tr></thead><tr><td>Cell 1</td></tr><tbody></tbody></table>';
  $('#tblContainer').empty().append(tbl);
  var test = $('#myTbl').find('thead');
  console.log(test);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='tblContainer'></div>

Как видно из примера, длина консоли составляет 0.Элемент не выбран.Мне интересно, как я могу получить доступ к динамически созданным элементам в JavaScript?Мне нужно предотвратить прокрутку заголовков, поэтому мне нужно выбрать элемент thead в таблице.

Answer 1

Попробуйте и вызовите buildTbl перед $ (document) .ready ()

function buildTbl() {
     var tbl = '<table id="myTbl"><thead><tr><th>Column 1</th></tr></thead><tr><td>Cell 1</td></tr><tbody></tbody></table>';

     $('#tableContainer').html(tbl)
 }

$(document).ready(function(){
   buildTbl();

   var test = $(document).find('#myTbl > thead');
   console.log(test);
});

И вызовите div с id tableContainer

Надеюсь, это поможет вам

Answer 2

В вашем случае я предлагаю вам другой способ создания вашего элемента.Поскольку вы используете jquery, вы можете использовать jquery для создания html-узла следующим образом, чтобы вы могли получить доступ к своему элементу jquery перед добавлением его в dom:

$(document).ready(function(){
  buildTbl();
});

function buildTbl() {
  var $tbl = $("table").attr("id", "myTbl");
  var $thead = $("thead");
  // TODO: Here you can add your table rows into your thead
  $tbl.append($thead);
  // now you can access to your thead element without searching the dom.
  console.log($thead);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Вам нужно добавить его в DOM, прежде чем вы хотите получить его с помощью селектора

$(document).ready(function() {
  buildTbl();
});

function buildTbl() {
  var tbl = '<table id="myTbl"><thead><tr><th>Column 1</th></tr></thead><tr><td>Cell 1</td></tr><tbody></tbody></table>';
  $('#tableContainer').append(tbl)


  var test = $('#myTbl').find('thead');
  console.log(test);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='tableContainer'></div>