Add button to a table using javascript

Question

I want to create an update table with a button, but the button is not show in the row. please help me to add the button to the table. thanks.

                function addRow(){
                     var ref = firebase.database().ref();
                       ref.on("value", function(snapshot) {
                       numPhotos=snapshot.child("La_Cartelera").child("ok").val();
                     })
                     var realNumPhotos=numPhotos-1;

                     for(var i =1; i<realNumPhotos; i++){
                     var ref = firebase.database().ref();
                       ref.on("value", function(snapshot) {
                       board=snapshot.child(i).child("Board").val();
                       imageChild=snapshot.child(i).child("Image").val();
                     })
                       console.log(i);
                       console.log(board);
                       rowNum = realNumPhotos-i;

                       var btn = document.createElement("BUTTON");
                       btn.innerHTML = "Confirm";
                       document.body.appendChild(btn);

                   var table = document.getElementById("myTable");
                   var row = table.insertRow(0);
                   var cell1 = row.insertCell(0);
                   var cell2 = row.insertCell(1);
                   var cell3 = row.insertCell(2);
                   var cell4 = row.insertCell(3);
                   cell1.innerHTML =  rowNum
                   cell2.innerHTML =  board
                   cell3.innerHTML =  imageChild
                   cell4.innerHTML =  btn
                 }
               }

do you want a single update button in the last row or an update button in each row?.. A complete example would be cool, so that people can easily test their solution for your problem. — JavaMan
– JavaMan, Commented Jan 14, 2020 at 8:48

Wimanicesir · Accepted Answer · 2020-01-14 08:54:49Z

2

This code adds your button now:

document.body.appendChild(btn);

Which is just appending it to the end of your body.

An approach could be like how you did your table

var table = document.getElementById("myTable");

Give the row you want to append to an id and then append it to that.

var rowButtons = document.getElementById("rowButtons");
rowButtons.appendChild(btn);

if you have multiple rows. Use a class to get all rows

allRows = document.getElementsByClassName("rowButton");

Then loop them all and add button.

for (var i = 0; i < allRows.length; i++) {
  allRows[i].appendChild(btn)
}

edited Jan 14, 2020 at 8:54

answered Jan 14, 2020 at 8:49

Wimanicesir

5,1492 gold badges14 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Donnie Nosayaba Imafidon · Accepted Answer · 2020-01-14 08:49:05Z

1

Check this line document.body.appendChild(btn);. You are appending the btn to the body and not the row

answered Jan 14, 2020 at 8:49

Donnie Nosayaba Imafidon

938 bronze badges

Comments

hoangdv · Accepted Answer · 2020-01-14 08:59:47Z

1

You don't need append confirm buttons to the body, this mean, you have an unused line - document.body.appendChild(btn); , just remove it.

And, if you want to push a html element to another element, you can use appendChild instead of innerHTML =.

In your case, you want to push a button into a cell (cell4), then you have to change cell4.innerHTML = btn to cell4.appendChild(btn)

answered Jan 14, 2020 at 8:59

hoangdv

16.3k4 gold badges31 silver badges54 bronze badges

Comments

Kai · Accepted Answer · 2020-01-14 09:00:04Z

One way is that you can use templates:

say you have:

<table>
<thead>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

Then you can use templating like Handlebars to put the template in the table.

like

<script id="table-tempalte" type="text/x-handlebars-template">
{{#each}}
<tr>
    <td>Some content</td>
    <td>Some content</td>
    <td><button>Edit Button</button></td>
</tr>
{{/each}}
</script>

You can compile this template as HTML and then put it in DOM.

This will help you add elements easily to the DOM and you can reference them by parent element since they will not be present by default while DOM Creation.

Collectives™ on Stack Overflow

Add button to a table using javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related