CODEWITHSUNDEEP
javascriptjqueryhtmljson
user3690249
user3690249

Reputation: 63

creating and appending a button to the end of each row in a dynamic html table using javascript

I have a table that I have dynamically created from a JSON object I am getting from the server via an ajax request. I am trying to append buttons to the end of each of the rows in the table. The table has seven rows, thus I have 7 buttons. I want something like the following. I want to set a javascript variable to create each individual button with the following parameters :

(obviously with different ids)

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

so that I can set up an array of buttons of these variables in javascript such as the following:

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

            ];

Then I can iterate through my JSON object and the buttons array appending them to the table (named requestTable) like the following : 

       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");
        }

The table data works, My issue has been that I am able to get a button to append and show if I use the document.getElementById of an existing button already created elsewhere on the form, but clearly I do not want this, I want them dynamically created with differing ids that exist only in the scope of the table. I am not sure how to accomplish this through javascript.

Upvotes: 0

Views: 2756

Answers (2)

codesforkids
codesforkids

Reputation: 9

try this

var button = document.createElement("button");
button.innerHTML ="/*put name of button here*/";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function(){/*put what button does here*/}

Upvotes: 0

Asgaros
Asgaros

Reputation: 78

I am not 100% sure if this is what you want, but this code should add a button with a dynamic ID (submit-button-1, submit-button-2, etc ...) inside the last cell of each row:

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');
}

Upvotes: 1

Related Questions