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

关键词：

【中文标题】如何从动态构建的表格中选择标题元素？【英文标题】：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

希望对您有所帮助

【讨论】：

在 Flask 中构建带有动态元素的 Bootstrap 表

】在Flask中构建带有动态元素的Bootstrap表【英文标题】：BuildingaBootstraptablewithdynamicelementsinFlask【发布时间】：2015-12-2219:26:50【问题描述】：我正在与Flask合作，根据从SQLAlchemy数据库中获取的人员列表构建Bootstrap表。但是，我想放... 查看详情

Firefox 问题 - 动态创建的选择元素在表格中不起作用

】Firefox问题-动态创建的选择元素在表格中不起作用【英文标题】：FirefoxIssue-dynamicallycreatedselectelementnotworkinginsidetable【发布时间】：2017-08-0617:36:37【问题描述】：浏览器-Firefox51.0.1（64位）操作系统-Ubuntu14.04首先我动态创建了一... 查看详情

哪个 jQuery 多元素选择器优化得更好

...58【问题描述】：我有一个根据AJAX调用返回的数据构建的动态表。在构建表格的函数结束时，我需要将jQueryUI包装器应用到表格中的一些锚元素，这些元素由“map-marker”和“th-list”图标标识。这两个选项哪个优化得 查看详情

在ajax json函数中使用jquery从动态表格单元格中选择一行

】在ajaxjson函数中使用jquery从动态表格单元格中选择一行【英文标题】：selectingarowfromadynamictablecellwithjqueryinsideanajaxjsonfunction【发布时间】：2021-10-2217:51:42【问题描述】：我正在尝试识别从表格单元格内的按钮中选择的表格行，... 查看详情

如何对我从其他表构建的非命名表中的 2 列求和

】如何对我从其他表构建的非命名表中的2列求和【英文标题】：Howtosum2columnsinanon-namedtableIhavebuiltfromothertables【发布时间】：2021-08-0509:42:41【问题描述】：我已经建立了一个表格，它从其他几个表格中获取列，这些表格都由一个... 查看详情

动态创建元素

...布时间】：2020-06-1509:22:09【问题描述】：您好，我想知道如何根据来自两个日期选择器输入值的日期期间或天数动态增加表列，并将日期作为列的标题。我用它来过滤数据库中的数据以建立考勤样本。以下是创建表格标题单元格... 查看详情

如何从 Pentaho-Kettle 中基于动态选择的 sql 查询中获取结果集？

】如何从Pentaho-Kettle中基于动态选择的sql查询中获取结果集？【英文标题】：Howtogetaresultsetfromadynamicselect-basedsqlqueryinPentaho-Kettle?【发布时间】：2019-05-2914:44:49【问题描述】：我想执行一组基于选择的sql查询，这些查询源自XML文件... 查看详情

使用 c# 动态构建 XML

...s=10)（例如，如果用户输入了4个帐户，那么我的代码应该如何）如果有选择选项。根据选择的元素，子元素应该改变。请有人帮助我。提前致谢BB我的代码：XElementreq=n 查看详情

我们如何使用javascript根据表格中的第一行元素动态添加行？

】我们如何使用javascript根据表格中的第一行元素动态添加行？【英文标题】：Howdowedynamicallyaddrowsaccordingtothefirstrowelementsinatableusingjavascript?【发布时间】：2021-09-0910:52:53【问题描述】：我有一个这样的html表格<tableid="myTable"style=... 查看详情

如何从表格的下拉菜单中删除先前选择的选项？

】如何从表格的下拉菜单中删除先前选择的选项？【英文标题】：Howtoremovethepreviouslyselectedoptionfromadrop-downmenuinatable?【发布时间】：2019-11-1504:45:31【问题描述】：我正在Angular7上制作一个项目。它有一个带有下拉列表的表格。下... 查看详情

如何从动态填充的下拉列表中动态选择一个选项

】如何从动态填充的下拉列表中动态选择一个选项【英文标题】：Howtodynamicallychooseanoptionfromadynamicallypopulateddropdown【发布时间】：2021-07-1621:40:54【问题描述】：我正在创建一个公司目录，您可以在其中创建、读取、更新和删除有... 查看详情

如何从 Angular 2 的指令中附加动态 DOM 元素？

】如何从Angular2的指令中附加动态DOM元素？【英文标题】：HowtoappenddynamicDOMelementsfromadirectiveinAngular2?【发布时间】：2017-12-1812:40:00【问题描述】：我有一个附加元素的Angular1.x指令。简而言之：app.directive(\'mydirective\',function()template... 查看详情

选择时如何从表格视图中隐藏行

】选择时如何从表格视图中隐藏行【英文标题】：Howtohiderowsfromtableviewwhenisselected【发布时间】：2020-01-3022:57:42【问题描述】：我想在选择该行时隐藏该行例如，如果我选择行“uno”，该行将转到其他视图控制器拍照，当用户拍... 查看详情

无论值如何，如何从选择器中排除具有属性的元素

】无论值如何，如何从选择器中排除具有属性的元素【英文标题】：Howtoexcludeelementwithattributefromselectorregardlessofvalue【发布时间】：2020-08-0307:07:58【问题描述】：我正在开发一个在屏幕上创建某些元素的框架，这些元素在任何情... 查看详情

使用从元素 id 的变量构建的数组分离和附加复选框选择

】使用从元素id的变量构建的数组分离和附加复选框选择【英文标题】：Detachandappendoncheckboxselection,usingarraybuiltfromvariablesofelementids【发布时间】：2018-05-3005:58:28【问题描述】：分离工作正常，但不附加。我认为数组是正确的，但... 查看详情

Vue动态组件：如何从同一组件的多个实例中进行选择

】Vue动态组件：如何从同一组件的多个实例中进行选择【英文标题】：VueDynamicComponents:howtoselectfrommultipleinstanceofthesamecomponent【发布时间】：2018-11-0409:59:22【问题描述】：我有以下问题：我在项目中使用iView作为UI库，我必须从动... 查看详情

如何从另一个元素选择中选择属性

】如何从另一个元素选择中选择属性【英文标题】：HowdoIselectattributesfromanotherselectionofelements【发布时间】：2021-04-2614:46:33【问题描述】：我正在使用Excel的PowerQuery来测试一个SQL查询，我最终将使用该查询来制作一个与数据库保... 查看详情

如何从离散的 varchar 元素中选择 xml？

】如何从离散的varchar元素中选择xml？【英文标题】：Howtoselectasxmlfromdiscretevarcharelements?【发布时间】：2017-06-2002:34:37【问题描述】：我有一个旧的SQLServer表，它有一个varchar(2056)列，其中每一行都包含XML的谨慎“元素”。有没有... 查看详情