Web Tools Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu December 26, 2022 › #Button #HowTo

How to add button dynamically in table cell

I think you want to add a button dynamically in table cell using javascript. Don't worry, it's as easy as cutting a cake.

I assume that you have the following table.

<table border> 
 <tr>
   <td>cell 1-1</td> 
   <td class="btn-cell">cell 1-2</td>
 </tr>
 <tr>
   <td>cell 2-1</td> 
   <td>cell 2-2</td>
 </tr>
</table>

If you look carefully at the table above, you will see that we have added a class name to a table cell. We'll add a button to that cell.

<script> 
 function myFunc(){
 
  let newBtn = document.createElement('button');
      newBtn.innerText = 'Click New Btn';
   document.querySelector('.btn-cell').appendChild(newBtn);

 }
</script>
  1. First we have created a button using the createElement() method and stored in a variable.
  2. Then, set some text to the button using the innerText property.
  3. Now it's time to append the created button inside the table cell.
save
listen
AI Answer
Write Your Answer
loading
back
View All