JaChNo
JaChNo

Reputation: 89

Counting Tables rows is producing the wrong answer with jquery

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

Answers (6)

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

Ishan Jain
Ishan Jain

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>

Demo

Note: A table may have only one header according the HTML4 specification.

Upvotes: 1

M&#39;sieur Toph&#39;
M&#39;sieur Toph&#39;

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

devnull69
devnull69

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

siraj pathan
siraj pathan

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

js fiddle

Upvotes: 0

Vinoth
Vinoth

Reputation: 647

The th tag creates a new tr tag. So the count is coming as 3. Put the th tag inside the thead tag. Then you will get the correct count. Check the jsfiddle

Upvotes: 2

Related Questions