CODEWITHSUNDEEP
javascriptjqueryhtml
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)

SamuelSunderSingh Abraham
SamuelSunderSingh Abraham

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

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