Reputation: 3
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
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);
}
}
Upvotes: 0
Views: 5030
Reputation: 2834
var row_count = $('#myTable tbody tr').length.length;
call this after the add and delete row function
Upvotes: 0
Reputation: 228
We need to do following changes :
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);
}
Upvotes: 0
Reputation: 41
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/
Upvotes: 0
Reputation: 171
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.
Upvotes: 1