Counting rows on a particular table

Question

I have a page that the user can dynamically add rows or tables to. I need to count the rows on a given table using jQuery to see if I just need to insert a row or a row and the header. Right now the count is just counting all rows on all tables. I am using jQuery 1.7.2 and the jquery templeter.

<div id="ClonePoint">
    <button id="exitSection" class="closesection"><span>Close</span></button> <br /> <br />
    <button class="btnEncode" id="buttonEncode">Encode</button>
    <input id="encryptedTokenClone"  />
    <button class="btnDecode" id="buttonDecode">Decode</button>                  
    <table class="tokenTable" cellpadding="3px">
        <tbody class="tokenBody" >
        </tbody>
    </table>
    <button id="addRow" class="addingRow">Add Row</button>   
</div>

And the jQuery that is adding the rows

$('#BackgroundArea').on('click', '.addingRow', function () {
    var selectedDiv = $(this).parent();
    var selectedTable = $(selectedDiv).children('.tokenTable');
    var rowCount = 0;
    rowCount = $('.tokenTable .tokenBody').children('tr').length;
    if (rowCount > 0) {
        $("#tokenAddRowTemplate")
            .tmpl()
            .appendTo(selectedTable);
    } else {
        $("#TableHeader")
            .tmpl()
            .appendTo(selectedTable);
        $("#tokenAddRowTemplate")
           .tmpl()
           .appendTo(selectedTable);
    }
});

The html for the insert is

<script id="TableHeader" type="text/html">
    <tr id="TableHead">
        <th width="55px">Delete Row</th>
        <th align="right"> Key </th>
        <th align="left"> Value </th>
    </tr>
</script>
<script id="tokenAddRowTemplate" type="text/html">
    <tr id="tokenRow">
        <td class="deleteRow" id="tokenCell">
            <button class="deleteRow">
                <span>delete row</span>
            </button>
        </td>
        <td class="keyValue" id="tokenCell">
            <div class="edit"  contenteditable="true"></div>
        </td>
        <td class="valueValue" id="tokenCell">
            <div class="edit"  contenteditable="true"></div>
        </td>
    </tr>
</script>

Answer 1

This should give tr count in your table.

$("#yourTableId tr").length

Is this what your are looking for ?

Answer 2

If each table is followed by its own "Add Row" button:

var $table = $(this).prev(),
    rowCount = $table.find('.tokenBody').children('tr').length;

if (rowCount > 0) {
   ...

This assumes the "Add Row" button immediately follows the table.

---

To make the code less brittle, you could consider using a container element, like this:

<div class="tokenTableContainer">
    <table class="tokenTable">
        ...
    <table>
    <button class="addingRow">...</button>
</div>

Then you can do this:

$('.addingRow').click(function() {
    var $table = $(this).closest('.tokenTableContainer').find('.tokenTable');
    ...
});