CODEWITHSUNDEEP
javascripthtmldynamichtml-table
Adnand
Adnand

Reputation: 562

How to create a table inside another table using JavaScript?

I am using JavaScript to dynamically create a table. I have a minimum example what i want. Here is the HTML to generate:

    <table id='mainTable'>
       <tr> 
          <td> Row 1 Cell 1 </td> 
       </tr>
       <tr> 
          <td> 
             <table>
                <tr> 
                   <td> ... </td>
                </tr>
             </table>
          </td> 
       </tr>
    </table>

I get the main table through var table1 = document.getElementById("mainTable"); and then add rows and cells using JavaScripts insertRow(0) and insertCell(0). I just want to know how to add a new table inside the td cell.

Upvotes: 0

Views: 902

Answers (1)

maaajo
maaajo

Reputation: 1025

// create new table
const newTable = document.createElement('table')

// target cell, this is selecting every td inside your mainTable
const target = document.querySelectorAll('#mainTable td')

// add new Table to first cell (if you want to add to specific cell you can add a class to it and the target it like that) or change the number in brackets:
target[0].appendChild(newTable)

Upvotes: 1

Related Questions