CODEWITHSUNDEEP
javascripthtmlvue.jshtml-table
Trinh Thien An
Trinh Thien An

Reputation: 19

How To Add Row Dynamic with Rowspan in Table with JavaScript

I have 2 add button. First add button on header, click this button will add 1 new row. Second add button in table (such as image on my post), click this button will add new row such as image my post. I want add row in table such as below image, but i haven't thought of a solution yet. Hope to be got your helps!

View Image Here

Upvotes: 1

Views: 814

Answers (2)

Seth Flagg
Seth Flagg

Reputation: 44

The insertRow() method allows you to add rows to a <table> and returns a reference to a new row. Adding that to an onClick() function should be easy! :)

Here's the relevant information on Mozilla's site .

Upvotes: 1

Murilo Pereira
Murilo Pereira

Reputation: 109

To solve this, you have to add a new table inside td, like this

function addNewRow() {
    let table = document.getElementById("add");
    table.innerHTML  += '<table><tr><td><b>This is a test</b></td></tr></table>';
}
  <html>
      <body>
          <button onclick="addNewRow()">Add</button>
          <table id='my-table'>
              <tr>
                  <td>This is one td</td>
                  <td id='add'>This is another td</td>
              </tr>
          </table>
      </body>

  </html>

Upvotes: 0

Related Questions