CODEWITHSUNDEEP
javascript
mimasik
mimasik

Reputation: 43

Adding buttons to the last column

How to add button to my HTML table with JS? The table is being created with JS using XML file data.

I have tried adding button where creating the table (between <td></td>) , however, without any luck.

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200) {
            perDetails(this);
        }
    };
    xmlhttp.open("GET", "../xml/data.xml", true);
    xmlhttp.send();
}
function perDetails(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table =`<tr><th>Title</th><th>Model</th><th>Price(EUR)</th><th>Delivery Time</th>
    <th>In Stock</th><th>Button Column</th></tr>`;
    var x = xmlDoc.getElementsByTagName("phones");
    console.log(x);
    // Start to fetch the data by using TagName 
    for (i = 0; i < x.length; i++) {
        let btn = document.createElement("button");
        btn.type = "add";
        btn.name = "addBtn";
        table += "<tr><td>" +
            x[i].getElementsByTagName("title")[0]
            .childNodes[0].nodeValue + "</td><td>" +
            x[i].getElementsByTagName("model")[0]
            .childNodes[0].nodeValue + "</td><td>" +
            x[i].getElementsByTagName("item_price")[0].childNodes[0].nodeValue
             + "</td><td>" + 
            x[i].getElementsByTagName("delivery_text")[0].childNodes[0].nodeValue +
            "</td><td>" + 
            x[i].getElementsByTagName("stock")[0].childNodes[0].nodeValue + "</td></tr>";
    // Print the xml data in table form
    document.getElementById("table").innerHTML = table;
}
}

Upvotes: 1

Views: 246

Answers (1)

Tom
Tom

Reputation: 5677

According to your table head, you should add your button here :

x[i].getElementsByTagName("stock")[0].childNodes[0].nodeValue + "</td>" +
"<td><button type='button'>click me</button></td></tr>";

Upvotes: 2

Related Questions