CODEWITHSUNDEEP
javascripthtml
Zing
Zing

Reputation: 41

Add button to a table using javascript

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

enter image description here

Upvotes: 0

Views: 119

Answers (4)

Kai
Kai

Reputation: 351

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.

Upvotes: 0

hoangdv
hoangdv

Reputation: 16127

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)

Upvotes: 1

Wimanicesir
Wimanicesir

Reputation: 5121

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

Upvotes: 2

Donnie Nosayaba Imafidon
Donnie Nosayaba Imafidon

Reputation: 93

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

Upvotes: 1

Related Questions