如何使用JavaScript将下拉按钮放入HTML表中？

我有一些JSON数据，使用JavaScript填充HTML表。我试图实现的是将一个新列命名为Action，并将按钮命名为Action drop。此按钮将是一个下拉按钮

所以基本上我想创建一个带有下拉按钮的HTML表

我已经用静态数据成功地创建了它

$（窗口）.load（函数（）{
//保存选择器，这样您就不必每次都进行查找
$dropdown=$（“#上下文菜单”）；
$（“.actionButton”）。单击（函数（）{
//获取行ID
var id=$（this.closest（“tr”）.children（）.first（）.html（）；
//移动下拉菜单
$（此）.after（$dropdown）；
//更新链接
//显示下拉列表
});
});

比尔达特
总计1
杰伊讷格尔
马勒什瓦拉姆
科拉尔
行动
全部的
450273
2855952
516093
678228




您的代码中似乎有问题

th = document.createElement("th");
a = document.createElement("a")
th.innerHTML = "Action drop";
th.classList.add("text-right");   
th.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
headerRow.appendChild(th);

锚定标记
应该在
元素中，但代码正在将“Action Drop”设置为元素中的HTML。您可以像这样更改代码

th = document.createElement("th");
a = document.createElement("a")
a.innerHTML = "Action drop";
a.classList.add("btn-default");
a.classList.add("actionButton");
th.classList.add("text-right");   
th.classList.add("dropdown");

th.appendChild(a);
headerRow.appendChild(th);

注意更改，现在为
设置了“Action drop”，并且
作为子项追加
。
希望这能解决问题。
代码中似乎有问题

th = document.createElement("th");
a = document.createElement("a")
th.innerHTML = "Action drop";
th.classList.add("text-right");   
th.classList.add("dropdown");
a.classList.add("btn-default");
a.classList.add("actionButton");
headerRow.appendChild(th);

锚定标记
应该在
元素中，但代码正在将“Action Drop”设置为元素中的HTML。您可以像这样更改代码

th = document.createElement("th");
a = document.createElement("a")
a.innerHTML = "Action drop";
a.classList.add("btn-default");
a.classList.add("actionButton");
th.classList.add("text-right");   
th.classList.add("dropdown");

th.appendChild(a);
headerRow.appendChild(th);

注意更改，现在为
设置了“Action drop”，并且
作为子项追加
。
希望这能解决问题。
您没有将锚定标记作为子元素附加到表头。此外，您可以在此处使用静态内容中使用的
，而不是

th = document.createElement("th"); 
a = document.createElement("a") //
th.innerHTML = "Action drop"; // removed this line
th.classList.add("text-right");
th.classList.add("dropdown"); 
a.classList.add("btn-default");
a.classList.add("actionButton");
a.setAttribute('data-toggle', 'dropdown'); // add this line
a.innerHTML = "Action drop"; // add this line
th.appendChild(a); // add this line
headerRow.appendChild(th);

另外，在标签下方添加
元素，并使用
id=“tbl”
，就像您在静态页面中所做的那样：

<div id="tbl"></div>

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="#" class="link1">go to next</a></li>
  <li><a href="#" class="Link2">next</a></li>
</ul>







最后，在JavaScript代码中，添加用于处理操作按钮onClick事件的代码（您已经在静态页面的JQuery中编写了此代码）。
您没有将锚定标记作为子元素附加到表头。此外，您可以在此处使用静态内容中使用的
，而不是

th = document.createElement("th"); 
a = document.createElement("a") //
th.innerHTML = "Action drop"; // removed this line
th.classList.add("text-right");
th.classList.add("dropdown"); 
a.classList.add("btn-default");
a.classList.add("actionButton");
a.setAttribute('data-toggle', 'dropdown'); // add this line
a.innerHTML = "Action drop"; // add this line
th.appendChild(a); // add this line
headerRow.appendChild(th);

另外，在标签下方添加
元素，并使用
id=“tbl”
，就像您在静态页面中所做的那样：

<div id="tbl"></div>

<ul id="contextMenu" class="dropdown-menu" role="menu">
  <li><a href="#" class="link1">go to next</a></li>
  <li><a href="#" class="Link2">next</a></li>
</ul>







最后，在JavaScript代码中，添加用于处理操作按钮onClick事件的代码（您已经在静态页面的JQuery中编写了此代码）。
将select添加到html表中

创建了带有选项元素的选择元素

方法
createSelect（options）
会执行此操作


使用数据中的选项填充“选择”

方法
createSelect（options）
采用一个option参数，该参数为
options中的每个项目创建一个option元素。使用jquery
$。每个
都在数组上迭代。
此选择由方法返回，并将
追加到表行（tr）的末尾


将结果select添加到表中

我在html
#thead
，
#tbody
中添加了一些ID，我可以在jquery中使用这些ID添加元素。它们被称为钩子。

在tbody中选择我们的表行（tr元素）以将结果select添加到


数据=[{
“金额”：291589，
“账单日期”：“2018-08-01”，
“出口”：“JAYANAGAR”
},
{
“金额”：58337，
“账单日期”：“2018-08-01”，
“出口”：“MALLESHWARAM”
},
{
“金额”：65970，
“账单日期”：“2018-08-01”，
“出口”：“科拉尔”
},
{
“金额”：296125，
“账单日期”：“2018-08-02”，
“出口”：“JAYANAGAR”
},
{
“金额”：56545，
“账单日期”：“2018-08-02”，
“出口”：“MALLESHWARAM”
},
{
“金额”：72213，
“账单日期”：“2018-08-02”，
“出口”：“科拉尔”
},
{
“金额”：346605，
“账单日期”：“2018-08-03”，
“出口”：“JAYANAGAR”
},
{
“金额”：62459，
“账单日期”：“2018-08-03”，
“出口”：“MALLESHWARAM”
},
{
“金额”：65248，
“账单日期”：“2018-08-03”，
“出口”：“科拉尔”
},
{
“金额”：518212，
“账单日期”：“2018-08-04”，
“出口”：“JAYANAGAR”
},
{
“金额”：104801，
“账单日期”：“2018-08-04”，
“出口”：“MALLESHWARAM”
},
{
“金额”：138151，
“账单日期”：“2018-08-04”，
“出口”：“科拉尔”
},
{
“金额”：628358，
“账单日期”：“2018-08-05”，
“出口”：“JAYANAGAR”
},
{
“金额”：115223，
“账单日期”：“2018-08-05”，
“出口”：“MALLESHWARAM”
},
{
“金额”：134107，
“账单日期”：“2018-08-05”，
“出口”：“科拉尔”
},
{
“金额”：177866，
“账单日期”：“2018-08-06”，
“出口”：“JAYANAGAR”
},
{
“金额”：66095，
“账单日期”：“2018-08-06”，
“出口”：“科拉尔”
},
{
“金额”：284069，
“账单日期”：“2018-08-07”，
“出口”：“JAYANAGAR”
},
{
“金额”：58789，
“账单日期”：“2018-08-07”，
“出口”：“MALLESHWARAM”
},
{
“金额”：67886，
“账单日期”：“2018-08-07”，
“出口”：“科拉尔”
},
{
“金额”：313128，
“账单日期”：“2018-08-08”，
“出口”：“JAYANAGAR”
},
{
“金额”：59939，
“账单日期”：“2018-08-08”，
“出口”：“MALLESHWARAM”
},
{
“金额”：68558，
“账单日期”：“2018-08-08”，
“出口”：“科拉尔”
}
];
//创建一个空的select和iterate