How to count rows on dynamically created rows with javascript

Question

I am trying to make a system where I can create new rows and delete them too, I would like to have a counter that counts the row number of each individual row.

Under "Num" I would like to have the row numbers displayed, but I can't figure out how to do so.

EDIT

• I found a jQuery snippet that seems to count my first row, but not the newly created ones.
• Updated Fiddle with jQuery snippet
• Updated JS code with snippet in the top

See my fiddle here: https://jsfiddle.net/pr05dw6p/14/

HTML code:

<div class="row">
    <div class="large-8 large-offset-2 columns">
        <h2>This is the table</h2>
            <form method="post">
                <table id="myTable" class="hover large-12 columns">
                  <thead>
                    <tr>
                      <th>Num.</th>
                      <th>Name</th>
                      <th>Height</th>
                      <th>Width</th>
                    </tr>
                  </thead>
                  <tbody id="bannerTable">
                    <tr>
                      <td><p></p></td>                      
                      <td><input type="text" name="name"></td>
                      <td><input type="number" name="height"></td>
                      <td><input type="number" name="width"></td>
                    </tr>
                  </tbody>
                </table>
            </form>
    </div>    
</div>         

<div class="row">
    <div class="large-4 large-offset-2 columns">
        <button class="button expanded" onclick="newRow()">Add new row</button>
    </div>
    <div class=" large-4 columns">
        <button class="alert button expanded" onclick="deleteRow()">Delete latest row</button>
    </div>
</div>

JS code:

//CREATE NEW BANNER - TABLE ROW COUNTER
$('#bannerTable tr').each(function(idx){
    $(this).children().first().html(idx + 1);
});


//CREATE NEW BANNER - CREATE ROW
function newRow() {
    var table = document.getElementById("bannerTable");
    var row = table.insertRow(1);

    var cell1 = row.insertCell(0);    
    var element1 = document.createElement('p');
        cell1.appendChild(element1); 

    var cell2 = row.insertCell(1);
    var element2 = document.createElement('input');
        element2.type="text", name="name";
        cell2.appendChild(element2);   

    var cell3 = row.insertCell(2);
    var element3 = document.createElement('input');
        element3.type="number", name="height";
        cell3.appendChild(element3);   

    var cell4 = row.insertCell(3);
    var element4 = document.createElement('input');
        element4.type="number", name="width";
        cell4.appendChild(element4);   
}

//CREATE NEW BANNER - DELETE ROW
function deleteRow(){
    var table = document.getElementById("bannerTable");
    var rowCount = table.rows.length;

    if(rowCount>1){            
        table.deleteRow(-1);
    }
}

Answer 1

var row_count = $('#myTable tbody tr').length.length;

call this after the add and delete row function

Answer 2

We need to do following changes :

• Add 1 as default value in HTML in the P tag

• In Javascript code we need count TR of table and put its value in table.insertRow(row_count); after that we need to increment value and add it to new <P> tag.

                   <tbody id="bannerTable">
                      <tr>
                        <td><p>1</p></td>                      
                        <td><input type="text" name="name"></td>
                        <td><input type="number" name="height"></td>
                        <td><input type="number" name="width"></td>
                      </tr>
                    </tbody>
  

Javascript Code

//CREATE NEW BANNER - CREATE ROW
function newRow() {
    var table = document.getElementById("bannerTable");
    var row_count = document.getElementById("bannerTable").rows.length;    
    var row = table.insertRow(row_count);
    row_count = row_count+1;

    var cell1 = row.insertCell(0);     
    var element1 = document.createElement('p');
            element1.innerHTML = row_count;
        cell1.appendChild(element1); 

    var cell2 = row.insertCell(1);
    var element2 = document.createElement('input');
        element2.type="text", name="name";
        cell2.appendChild(element2);   

    var cell3 = row.insertCell(2);
    var element3 = document.createElement('input');
        element3.type="number", name="height";
        cell3.appendChild(element3);   

    var cell4 = row.insertCell(3);
    var element4 = document.createElement('input');
        element4.type="number", name="width";
        cell4.appendChild(element4);   
}

Answer 3

You can get the length(count) of table rows as stated in other answers by using

table.getElementsByTagName("tr").length

This will get the count, and you can put it into the html of your generated p tag by calling element1.innerHTML = table.getElementsByTagName("tr").length

I would also suggest running your newRow() function on page initialization without a preset tr. The count of the rows will also help when you insert a row so that it always inserts a row AFTER the previously inserted row, keeps the Num. column nice and clean too.

Check out this updated fiddle: https://jsfiddle.net/pr05dw6p/19/

Answer 4

To count the rows you can use:

var row_count = $('#bannerTable tr').length;

you can call it at the end of newRow() and deleteRow() an append the result e.g. to a div.