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

您需要先将其附加到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>

Answer 2

尝试此操作，并在$（document）.ready（）之前调用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').html(tbl)
 }

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

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

并使用id tableContainer调用div

希望这对您有帮助

Answer 3

在您的情况下，我建议您使用另一种创建元素的方式。在使用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>

如何从动态生成的表中选择thead元素？

3 个答案: