javascript - 我可以使用 html 和 Javascript 为表动态创建下拉行吗
问题描述
我已经动态创建了一个表,但现在我想根据需要创建一个下拉行。我对每一行都有一个 onclick 处理程序。单击后,该行应该向下放置一些东西(例如隐藏的 div,但不幸的是,这些不能在动态设置中轻松创建,因为在创建行时无法分配唯一的 id。这在 Javascript/jQuery 中是否可行?或,最好是推特引导程序?
function buildHtmlTable(portalData, tablename) {
var columns = [];
var headerTr$ = $('<tr/>');
var n = 0;
if (tablename == "order-table") {
document.getElementById("dist-name").innerText = JSON.parse(JSON.stringify(portalData[0], null, 2))["Company Name"];
n = 1;
}
for (var i = 0 ; i < portalData.length ; i++) {
var rowHash = portalData[i];
for (var key in rowHash) {
if ($.inArray(key, columns) == -1) {
columns.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$('#' + tablename).append(headerTr$);
for (i = 0 ; i < portalData.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = n ; colIndex < columns.length ; colIndex++) { // n is how many columns to drop, based on table name
var cellValue = portalData[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
row$.append($('<td/>').html(cellValue));
}
$('#' + tablename).append(row$);
}
// Drop unnecessary columns
for(i = 0 ; i<n; i++) {
$("#order-table").find('td,th').first().remove();
}
if (tablename == "order-table") {
var tablerows = document.getElementsByTagName('tr');
for (var x in tablerows) {
tablerows[x].classList.add("clickable");
tablerows[x].setAttribute(data-toggle,"collapse");
tablerows[x].setAttribute(data-target,"");
}
}
}