JSFiddle - React, Tailwind, and code Playground

by Pasquale Lisena

HTML

<table id="sampTable">
      <thead>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
            <td>Column 3</td>
            <td>Column 4</td>
            <td>Column 5</td>
          </tr>
      </thead>
      <tbody>
         <tr>
              <td><input type="text"/></td>
              <td><input type="text"/></td>
             <td><input type="text"/></td>
             <td></td>
             <td></td>
         </tr>
          <tr id="summaryRow">
              <td><input type="text"/></td>
              <td><input type="text"/></td>
             <td><input type="text"/></td>
             <td></td>
             <td></td>
         </tr>
      </tbody>
    </table>
    <br>

    <button id="AddBtn" onclick="addTableRow($('#sampTable'));">Add row</button>

JavaScript

function addTableRow(jQtable){
        jQtable.each(function(){
            var $table = $(this);
            // Number of td's in the last table row
            var n = $('tr:last td', this).length;
            var $tds = $('<tr>');
            for(var i = 0; i < n; i++){
                $tds.append('<td><input type="text" class="tb-input"/></td>');
            }
           if($('tbody', this).length > 0){
               // $('tbody', this).append(tds);
               $('tr:last',this).before($tds);
            }else {
                $(this).append($tds);
            }
        });
  }

window.addTableRow = addTableRow;