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>

Ducane · Accepted Answer · 2014-03-03 22:34:55Z

1

This should give tr count in your table.

$("#yourTableId tr").length

Is this what your are looking for ?

answered Mar 3, 2014 at 22:34

Ducane

1291 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John S · Accepted Answer · 2014-03-03 23:51:27Z

1

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');
    ...
});

edited Mar 3, 2014 at 23:51

answered Mar 3, 2014 at 22:35

John S

21.5k9 gold badges50 silver badges59 bronze badges

3 Comments

cpugeek87 Over a year ago

Wouldn't that add a row to all tables that exist? What I need is to add a row to only one table at a time.

John S Over a year ago

@cpugee87 - Yes, but only to those tables that do not already have a header row. If you want to add to just one table, can I assume each table has its own "Add Row" button?

cpugeek87 Over a year ago

yes each table does have it's own add row button. Thank you for the help.

Collectives™ on Stack Overflow

Counting rows on a particular table

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related