如何从动态构建的表格中选择标题元素？

Posted 2023-05-09

【中文标题】如何从动态构建的表格中选择标题元素？

【英文标题】：How to select thead element from dynamically built table?

【发布时间】：2019-05-01 16:42:30

【问题描述】：

我在 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 元素。

【问题讨论】：

$('#myTbl') 对字符串变量中的 html 一无所知...它在 DOM 中查找此类元素。在 dom 中插入表格 html 或解释更多关于你正在尝试做什么

tbl 变量未在您的代码中使用

我很抱歉错过了展示如何将tbl 附加到 DOM 的代码。在我的示例中，现在使用 empy() 和 append() 方法工作得很好。在我正在处理的项目中找到的原始代码中，他们使用了.html()。似乎这是导致问题的原因，我无法检测到 dom 中的元素。我不确定.html() 在这种情况下是否是一种好习惯。谢谢。

没有理由 html() 不应该工作

@charlietfl 我不确定为什么选择器没有抓住桌子。

【参考方案1】：

在您的情况下，我建议您另一种创建元素的方式。当您使用 jquery 时，您可以使用 jquery 创建您的 html 节点，如下所示，以便您可以在将其附加到 dom 之前访问您的 jquery 元素：

$(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>

【参考方案2】：

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

【参考方案3】：

试试这个并在 $(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

希望对您有所帮助