javascript - 使用 javascript 创建按钮并将其附加到动态 html 表格中每行的末尾

Question

我有一个表，是通过 ajax 请求从服务器获取的 JSON 对象动态创建的。我正在尝试将按钮附加到表中每行的末尾。该表有七行，因此我有 7 个按钮。我想要类似下面的东西。我想设置一个 JavaScript 变量来创建具有以下参数的每个单独的按钮:

(显然有不同的 ID)

        <input type="button"id="submit-button2"class="btn btn primary"value="Submit" />

这样我就可以在 JavaScript 中设置这些变量的按钮数组，如下所示:

            var buttons = [
                  button1,
                  button2,
                  button3,
                  button4,
                  button5,
                  button6,
                  button7            

            ]; 

然后我可以迭代 JSON 对象和按钮数组，将它们附加到表(名为 requestTable)，如下所示:

       for(var j = 0; j < request[0].DepartmentApprovals.length &&      buttons.length; j++) {

             $("<tr>" + "<td id=\"Departments\">" 

               + request[0].DepartmentApprovals[j].Department +":" + "</td>"

               + "<td input type=\"text\" id=\"ApproverLanId\" contenteditable=\"false\" class=\"underline\">" 

               + request[0].DepartmentApprovals[j].Approver.LanId + "</td>"

               + "<td>" + "Date:" + "</td>"

               + "<td contenteditable=\"false\" class=\"underline\">" + request[0].DateApproved + "</td>"

               + "<td>" +  buttons[j].outerHTML + "</td>"+ "</tr>").appendTo("#requestTable");
        }

表格数据有效，我的问题是，如果我使用表单上其他地方已经创建的现有按钮的 document.getElementById，我可以获得一个附加按钮并显示，但显然我不想要这个，我希望它们使用仅存在于表范围内的不同 ID 动态创建。我不知道如何通过 JavaScript 来完成此任务。

Answer 1

我不是 100% 确定这是否是您想要的，但此代码应该在最后一个单元格内添加一个带有动态 ID 的按钮(submit-button-1、submit-button-2 等...)每行:

for (var j = 0; j < request[0].DepartmentApprovals.length && buttons.length; j++) {
    var appendHTML = '';

    appendHTML += '<tr>';
    appendHTML += '<td id="Departments">' + request[0].DepartmentApprovals[j].Department + ':</td>';
    appendHTML += '<td input type="text" id="ApproverLanId" contenteditable="false" class="underline">' + request[0].DepartmentApprovals[j].Approver.LanId + '</td>';
    appendHTML += '<td>Date:</td>';
    appendHTML += '<td contenteditable="false" class="underline">' + request[0].DateApproved + '</td>';
    appendHTML += '<td><input type="button" id="submit-button-' + (j + 1) + '" class="btn btn primary" value="Submit" /></td>';
    appendHTML += '</tr>';

    appendHTML.appendTo('#requestTable');
}