Reputation: 89
I have a table that I allow the user to add rows to. when i load the page it has one row on show and a template row that is hidden.
I want to be able to check the number of rows in the table to prevent the user from removing all the rows.
my table is defined as
<table id="tarrifItems">
<th>Item</th>
<th>Cost</th>
<tbody>
<tr>
<td><input type="text" class="form-control" id="item[]" name="item[]"></td>
<td>
<div class="input-group">
<span class="input-group-addon">£</span>
<input type="text" class="form-control money" id="cost" name="cost[]" value="0.00"/>
</div>
</td>
<td>
<span href="" class="label label-success" onclick="addRow()">+</span>
<span href="" class="label label-success" onclick="removeRow(this)">-</span>
</td>
</tr>
<tr id="tarrifTemplate" style="display: none">
<td><input type="text" class="form-control" id="item[]" name="item[]"></td>
<td>
<div class="input-group">
<span class="input-group-addon">£</span>
<input type="text" class="form-control money" id="cost" name="cost[]" value="0.00"/>
</div>
</td>
<td>
<span href="" class="label label-success" onclick="addRow()">+</span>
<span href="" class="label label-success" onclick="removeRow(this)">-</span>
</td>
</tr>
</tbody>
</table>
This gives a count of 2 rows but when i run the command
alert($('#tarrifItems >tbody >tr').length)
I have included a fiddle showing this Fiddle it gives me a count of 3. Can anyone suggest where i am going wrong?
EDITED: updated FIDDLE Link to correct fiddle
Upvotes: 1
Views: 1425
Reputation: 1
Some time row count seems to be wrong this because Improper taging ie begin and end tag should be Proper when dynamically adding rows should be careful
Upvotes: 0
Reputation: 8171
In your HTML code - there are two header cell th
exist in code. So the second th
produce an extra row before tbody.
So, you should put the th
tag inside the thead
tag.
<thead>
<tr>
<th>Item</th>
<th>Cost</th>
</tr>
</thead>
Note: A table may have only one header according the HTML4 specification.
Upvotes: 1
Reputation: 2676
I think the nicest way to do it is to set a specific class to the row you add.
var clone = $('#tarrifTemplate').clone();
clone.removeAttr('id');
clone.removeAttr( 'style' );
clone.addClass('addedRow') // add a class to the clone
clone.appendTo('#tarrifItems');
And to count it when needed :
alert($('#tarrifItems .addedRow').length); // should give you the exact number of rows you added.
Upvotes: 0
Reputation: 16584
The extra th before tbody produce an extra row. Check it out: http://jsbin.com/kexuk/1/edit
And counting tr
will also include the rows with display: none
, because they still exist in the DOM
Suggestion: Wrap the th
elements in an explicit thead
element, so that your selector won't grab them any more
<thead>
<tr>
<th>Item</th>
<th>Cost</th>
</tr>
</thead>
Upvotes: 2
Reputation: 1495
alert showing 3 because it also counting one hidden row and heading row.
$('#tarrifItems tbody tr:visible').size();
i'hv updated you html and js in fiddle
Upvotes: 0