I have created a HTML table as below. I need to add a button after the Price of each product. How can I do this using JAVASCRIPT? (eg: Assume table has more than 20 rows. I need a button in each and every row)

<table id="productTable" class="table table-bordered table-condensed table-striped">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>Soap</th>
            <th>good for babies</th>
            <th>75</th>
        </tr>

        <tr>
            <th>Milk</th>
            <th>manufactured</th>
            <th>100</th>
        </tr>

        <tr>
            <th>Rice</th>
            <th>red rice 1kg pack</th>
            <th>130</th>
        </tr>
    </tbody>
</table>

I have created a HTML table as below. I need to add a button after the Price of each product. How can I do this using JAVASCRIPT? (eg: Assume table has more than 20 rows. I need a button in each and every row)

<table id="productTable" class="table table-bordered table-condensed table-striped">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>Soap</th>
            <th>good for babies</th>
            <th>75</th>
        </tr>

        <tr>
            <th>Milk</th>
            <th>manufactured</th>
            <th>100</th>
        </tr>

        <tr>
            <th>Rice</th>
            <th>red rice 1kg pack</th>
            <th>130</th>
        </tr>
    </tbody>
</table>

• javascript
• html

• Does this answer your question? JavaScript click event listener on class – DCR Commented Dec 2, 2020 at 16:49
• 3 Can you show us what have you tried so far, please? As a general direction, you have to select the tbody element, loop through all its tr and, for each tr you have to append a new td (not a th, as in your code; th are for headings), containing the button. – secan Commented Dec 2, 2020 at 16:50
• @secan - sorry about <th> tag. Like you said it should be <td>. Tried to edit. but can't. I only created the html table. I don't know how to add a button into each row using JS. (need to assume, table has at least 20 rows) – Niroshan De Mel Commented Dec 2, 2020 at 17:03
• @DCR - It's not helpful – Niroshan De Mel Commented Dec 2, 2020 at 17:04
• Buttons alone are rarely useful, is there a specific task a button should perform? The algorithm secan has described, takes seven lines of code, try to implement that. If you'll get stuck, then ask a question. – Teemu Commented Dec 2, 2020 at 17:06

1 Answer 1

In my example, the forEach method is used. And the button is also created using the createElement() method:

let button = document.createElement('button');

Next, a th tag will be created to place the button there:

let td = document.createElement('td');

And a class is assigned to the button, with which you can refer to this button by class:

button.className = 'btn_buy';

With this code, a button is created for all table rows!

let tr = document.querySelectorAll("table tbody tr");

Array.from(tr).forEach(function(trArray) {
    let button = document.createElement("button");
    let td = document.createElement("td");
    button.innerText = "buy";
    button.className = "btn_buy";
    td.append(button);
    trArray.append(td);
});

<table>
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Soap</td>
            <td>good for babies</td>
            <td>75</td>
        </tr>

        <tr>
            <td>Milk</td>
            <td>manufactured</td>
            <td>100</td>
        </tr>

        <tr>
            <td>Rice</td>
            <td>red rice 1kg pack</td>
            <td>130</td>
        </tr>
    </tbody>
</table>