How to add a BUTTON in to each HTML table rows using JAVASCRIPT

Question

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>

Does this answer your question? [JavaScript click event listener on class](https://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class) — DCR, Dec 02 '20 at 16:49
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, Dec 02 '20 at 16:50
@secan - sorry about tag. Like you said it should be . 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, Dec 02 '20 at 17:03
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, Dec 02 '20 at 17:06
@Teemu - Yes. I need to display a message once a button is clicked. That is why I need a button for each and every row in the table. — Niroshan De Mel, Dec 02 '20 at 17:12
@NiroshanDeMel, what do you mean with "I don't know how to add a button into each row using JS"? You do not know JS at all or you do not know where to start from? In the second case, you might want to check the functions `querySelector()` (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), `createElement()` (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and `appendChild()` (https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) — secan, Dec 02 '20 at 17:15
@secan - I got the answer. -- sergey kuznetsov's solution is what I was looking for. — Niroshan De Mel, Dec 02 '20 at 18:17
@NiroshanDeMel good for you. The point, though, is you should not expect people here "do the job for you"; you should always try to do it by yourself and be able to show your attempted solutions, rather than simply stating a requirement and waiting for someone to implement it for you. — secan, Dec 03 '20 at 08:04

s.kuznetsov · Accepted Answer · 2022-04-02T08:50:25.027

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>

This is exactly what I needed. Thanks a lot :) – Niroshan De Mel Dec 02 '20 at 18:13 — Niroshan De Mel, Dec 02 '20 at 18:13
@NiroshanDeMel, no problem :) glad to help! – s.kuznetsov Dec 02 '20 at 18:15 — s.kuznetsov, Dec 02 '20 at 18:15

How to add a BUTTON in to each HTML table rows using JAVASCRIPT

1 Answers1