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);
    }
}

leguano · Accepted Answer · 2016-01-13 14:34:37Z

1

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.

answered Jan 13, 2016 at 14:34

leguano

1711 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ram Over a year ago

See the code and tags of the question. OP doesn't use jQuery.

Oliver B. Schrøder Over a year ago

I have updated the tags to incude JQuery, i forgot to put it ealier.

Matholomew · Accepted Answer · 2016-01-13 14:51:20Z

0

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/

answered Jan 13, 2016 at 14:51

Matholomew

413 bronze badges

1 Comment

Oliver B. Schrøder Over a year ago

Thank you! This is exacly what is was looking for.

Mr Lister · Accepted Answer · 2016-01-18 08:29:26Z

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);   
}

Jobelle · Accepted Answer · 2016-01-18 08:36:09Z

0

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

call this after the add and delete row function

answered Jan 18, 2016 at 8:36

Jobelle

2,8441 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to count rows on dynamically created rows with javascript

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related