Finding the count of <td> Jquery

Question

I have the following HTML structure and I wanted to find out the length of immediate <td>s. here is the code that I am using:-

<table class="PrintTable">
    <tr>
      **<td>**
        <table>
            <thead>
                <tr><th>Type Of Transaction</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Name</td>
                </tr>
                <tr>
                    <td>Age</td>
                </tr>
            </tbody>
        </table>
      </td>
      **<td>**
        <table>
            <thead>
                <tr><th>2006</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td>Andi</td>
                </tr>
                <tr>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
      </td>

    </tr>
</table>

The function that I am using to find out the length of td is

function getBody(element)
{
    var divider=2;
    var originalTable=element.clone();
    var tds = $(originalTable).children('tr').children('td').length;
    alert(tds);


}

The result I am seeing is 0. No clue at all. I am expecting 2. Any help will be appreciated.

Why are you using .clone()? And is element meant to be a jQuery object? I assume so, since clone is not a native JS method on a DOM object. Can you please provide an example of how you're invoking getBody? — Steven
– Steven, Commented Jan 18, 2011 at 21:00
Yes, element is a JQuery Object and it contains the complete table as object. Even if you do not invoke clone(), still it shows 0 where as I am expecting 2. — Nrusingha
– Nrusingha, Commented Jan 18, 2011 at 21:05

Steven · Accepted Answer · 2011-01-18 21:03:08Z

24

I removed the asterisks out of your HTML and made some assumptions about how you're invoking getBody, so if I did anything that wasn't right, let me know.

Code: http://jsfiddle.net/27ygP/

function getBody(element) {
    var divider = 2;
    var originalTable = element.clone();
    var tds = $(originalTable).children('tbody').children('tr').children('td').length;
    alert(tds);
}

getBody($('table.PrintTable'));

The big change was the add a .children('tbody'). The HTML interpreter wraps the trs in tbody. Traverse down into that, and you'll be fine.

answered Jan 18, 2011 at 21:03

Steven

18.1k13 gold badges71 silver badges119 bronze badges

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

3 Comments

Nrusingha Over a year ago

Thanks a lot. It works. Is there a good debugger where we can find out all these tricks.

Steven Over a year ago

Firebug for Firefox is the best tool on the market to navigate the DOM. All of the major browsers have built-in tools to do the same (just click around the menus). It will take you to, among other things, an interactive tree that you can traverse manually.

Adam Fowler Over a year ago

Thanks! I wonder why you cant use multiple selectors with .children()

phillip · Accepted Answer · 2011-01-18 21:11:37Z

5

I think you want to use the following.

$("td").length

UPDATE

You will want to use the tr tag as the start selector and then count each td selector using first to take just the first one.

$("tr", $("td:first")).length

edited Jan 18, 2011 at 21:11

answered Jan 18, 2011 at 20:58

phillip

2,77819 silver badges22 bronze badges

1 Comment

Nrusingha Over a year ago

Yes, but not for the nested ones but only for the <td>.

badp · Accepted Answer · 2011-11-07 15:14:21Z

5

Try this:

//For FFox
$(document).ready(function(){
var countTD=$("Your_Table_ID_or_Class tr:first > td").length;
});

// For webKit Browser
$(window).load(function(){
var countTD=$("Your_Table_ID_or_Class tr:first > td").length;
});

Note; If you creating dynamic table row column then use $(document).live("click",function(){});

edited Nov 7, 2011 at 15:14

badp

11.9k5 gold badges65 silver badges91 bronze badges

answered Nov 5, 2011 at 12:00

Nono

7,4024 gold badges42 silver badges41 bronze badges

Comments

Peter Örneholm · Accepted Answer · 2011-01-18 21:04:53Z

1

This should work:

var itemsCount = $(".PrintTable > tr > td").length;

Update:

I just realized that at least Chrome inserts <tbody> if it isn't already present, so to get cross browser support:

var itemsCount = $(".PrintTable > tbody > tr > td, .PrintTable > tr > td").length;

Example: http://jsfiddle.net/H2JWS/

edited Jan 18, 2011 at 21:04

answered Jan 18, 2011 at 20:58

Peter Örneholm

2,85820 silver badges24 bronze badges

Comments

badp · Accepted Answer · 2011-11-07 15:14:40Z

1

In general, if you want to count the number of td's in a specific row, you can do this..

$(function(){
  count = $("table tr").children("td").index()+1; 
});

edited Nov 7, 2011 at 15:14

badp

11.9k5 gold badges65 silver badges91 bronze badges

answered Nov 7, 2011 at 14:09

Uttam Grandhi

111 bronze badge

Comments

Kalyani · Accepted Answer · 2015-03-05 13:05:57Z

1

var rowCount = $('#myTable tr').length;

answered Mar 5, 2015 at 13:05

Kalyani

111 bronze badge

Comments

Willie Cheng · Accepted Answer · 2016-04-21 07:49:43Z

0

var originalTable = $(remove_copy_drargelement).closest('table').clone();

var tds = $(originalTable).children('tbody').children('tr').children('td').length;

edited Apr 21, 2016 at 7:49

Willie Cheng

8,36314 gold badges63 silver badges72 bronze badges

answered Apr 21, 2016 at 7:26

user6234155

11 bronze badge

Collectives™ on Stack Overflow

Finding the count of <td> Jquery

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related