Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do I get the number of rows of a table using jquery in an HTML 5 document?

Posted on 2013-01-11
9
Medium Priority
?
275 Views
Last Modified: 2013-01-11
Hi:

Totally new to the world of HTML 5.

I've got a table defined
===================
<table id="foo">
 <tr> ....</tr>
 <tr> ....</tr>
 <tr> ....</tr>
</table>

I can get the number of rows in the the table by:
=======================================
var rowLength = document.getElementById("foo").rows.length;


Why doesn't the following work?
==========================
var rowLength = $("#foo").rows.length;

Thanks,
JohnB
0
Comment
Question by:jxbma
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
9 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 38768737
$("#foo") return a jQUery object not a table element

Use of the following :
$("tr", "#foo").length
$("#foo").find("tr").length
$("tr", "#foo").size()
$("#foo").find("tr").size()

Test page : http://jsfiddle.net/E7vPE/1/
0
 
LVL 1

Author Comment

by:jxbma
ID: 38768802
Thanks.
OK. I see that this works.

Can you explain to how to read wht's going on in:
========================================
$("tr", "#foo")

Does this mean find all the <tr>'s as children?
It would help clear things up a bit if you could put that into words.

Thanks,
JohnB
0
 
LVL 1

Author Comment

by:jxbma
ID: 38768804
How would I use the same jquery syntax to add and remove rows?

Thanks,
JohnB
0
 [eBook] Windows Nano Server

Download this FREE eBook and learn all you need to get started with Windows Nano Server, including deployment options, remote management
and troubleshooting tips and tricks

 
LVL 82

Expert Comment

by:leakim971
ID: 38768806
Yes, the second argument is the context where to search the first one
0
 
LVL 2

Expert Comment

by:tap52384
ID: 38768911
jQuery
$("#foo tr").length;

"Rows" doesn't work because rows is not a valid jQuery property.
0
 
LVL 1

Author Comment

by:jxbma
ID: 38768930
1) So is there any difference between:
===============================

$("#foo tr")


AND


$("tr", "#foo tr")

2) How would I use the same jquery syntax to add and remove rows?
========================================================


Thanks,
JohnB
0
 
LVL 2

Accepted Solution

by:
tap52384 earned 1000 total points
ID: 38768940
The second one is looking for nested <tr> tags, so that's not what you want.

Essentially, if you want to add a <tr> to an existing table, you could do:

$("#foo").append("<tr><td>cell content</td></tr>");

To remove a row, try:

$("#foo tr").eq(index).remove();

You could rewrite the second selector like:

$("tr", "#foo")

to select all rows as well. The second parameter is "context", or where the element(s) can be found.
0
 
LVL 1

Author Closing Comment

by:jxbma
ID: 38768953
Hey Folks:

Thanks so much for jumping on this and giving me answers quickly.

Thanks,
JohnB
0
 
LVL 2

Expert Comment

by:tap52384
ID: 38768954
Oh, and to explain a little better why "rows" works in plain javascript (I didn't know that) and not on the jQuery object, is because again, "rows" is not a property of a jQuery object. You can, however, get an actual HTML element, like a row, like such:

$("#foo tr")[index]

where "index" is the actual row. This would not give you a jQuery element, but an actual row of the table. You could use regular javascript methods on this object and it should work, like:

$("#foo tr")[index].style.backgroundColor = "#ffffff";
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question