Adding more rows to a HTML table on request

Question

I'm currently making an Excel-like grid with HTML/jQuery/CSS.

I would like to know if there's a way to add more rows on a user-made request (clicking on a button or something).

I have seen some HTML DOM examples in JS on w3schools, but I don't know if it's usable in jQuery. I'd appreciate any kind of a simple example.

Answer 1

Use the below code for understanding and modify as per your need

function addRow(){
  
  var str ="<tr><td>data 1</td><td>data 2</td><td>data 3</td></tr>";
  
  $('#mytable tbody').append(str);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<table id="mytable" border="1">
  <thead>
    <tr>
    <th>Head 1</h1>
    <th>Head 1</h1>
    <th>Head 1</h1>
   </tr>
   
</thead>
<tbody>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td><td>data 3</td>
    </tr>
  </tbody>
    </table>
      
    <input type="button" value="Add" onclick="addRow()" />
      

Answer 2

I'll give you some starting point friend, first you might need to learn/use ajax, so you can communicate to your server side language if you need to get the data via mysql or any database.

Then you can append the ajax response via DOM manipulation using javascript.

Just read about jquery DOM manipulation.

EDIT

Your flow should be like this.

• Add handler on button onclick event via jquery .click(), that handler should contain ajax request $.ajax().
• Detect ajax success, via "success" parameter on $.ajax()
• Then On success append response data into container via DOM append.

Answer 3

HTML

<table id="someTable">
    <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value 1</td>
            <td>Value 2</td>
        </tr>
    </tbody>
</table>

<button id="newrow">+</button>

JS

$(document).ready(function()
                  {
                      var table = $('#someTable'), 
                          newRow = '<tr><td>New Row Val</td><td>New Row Val</td></tr>';
                     $('#newrow').on('click', function(e)
                                     {
                                         table.find('tbody').append(newRow);
                                     });
                  });

http://jsfiddle.net/vw437k03/1/ demonstrates a very very basic example of what i think you want.

Use the code provided to load data from AJAX or a form.

P.S look @ slickgrid -- http://mleibman.github.io/SlickGrid/examples/example-spreadsheet.html

Answer 4

try to follow this tutorial. I think you are trying to do the same thing as in this tutorial. It has detailed information about creating, editing and deleting rows in a table.

Following is the code for adding a new row to table easily using jQuery.

function Add(){
 $("#tblData tbody").append(
  "<tr>"+
  "<td><input type='text' /></td>"+
  "<td><input type='text'/></td>"+
  "<td><input type='text'/></td>"+
  "</tr>");
}; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAddd" onclick="Add()">New</button>
<table id="tblData">
 <thead>
  <tr>
   <th>Name</th>
   <th>Phone</th>
   <th>Email</th>
   <th></th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>