Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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>";
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading