{"id":847,"date":"2012-06-08T04:45:15","date_gmt":"2012-06-08T04:45:15","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=847"},"modified":"2012-06-08T04:45:15","modified_gmt":"2012-06-08T04:45:15","slug":"jquery-table-rows-count-count-rows-in-table-using-jquery-example","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-table-rows-count-count-rows-in-table-using-jquery-example\/","title":{"rendered":"jQuery Table Rows Count Examples"},"content":{"rendered":"<p>Did you want to count the rows of a table using jQuery but did not know where to start from? In \u00a0<em><strong>get\u00a0table rows count\u00a0in jQuery<\/strong> <\/em>by using just 1 line of code. Follow along to learn how.<!--more--><\/p>\n<h2>Examples in jQuery to Get Table Rows Count<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=847\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>There are couple of ways to use <strong>jQuery to\u00a0get table rows count<\/strong>. \u00a0It can be obtained by using the\u00a0<strong>.length<\/strong>\u00a0property.\u00a0We are going to look at them now by means of examples.<\/p>\n<h3>Example 1: Count Rows in Table using jQuery<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Count Table Rows with jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"my_table\"&gt;\n&lt;tr&gt;\n&lt;td&gt;1&lt;\/td&gt;\n&lt;td&gt;6&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;2&lt;\/td&gt;\n&lt;td&gt;7&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;3&lt;\/td&gt;\n&lt;td&gt;8&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;4&lt;\/td&gt;\n&lt;td&gt;9&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;tr&gt;\n&lt;td&gt;5&lt;\/td&gt;\n&lt;td&gt;10&lt;\/td&gt;\n&lt;\/tr&gt;\n&lt;\/table&gt;\n\n&lt;button name=\"count_table_rows\" id=\"count_table_rows\"&gt;Count Table Rows&lt;\/button&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\n$('#count_table_rows').click(function() {\n\nvar rows = $(\"#my_table tr\").length;\n\nalert('Total Rows: '+rows);\n\n});\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>In the above example, simply click on the button and that will alert the number of rows in the table.<\/p>\n<h3>Example 2 &#8211;\u00a0Count Rows in Table using jQuery<\/h3>\n<p>Alternately, instead of using .length property, you can use <strong>size() method<\/strong> to <strong>get table rows count<\/strong>. Simply use the following jQuery code instead of the one listed in the code above:<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\"&gt;\n\n$('#count_table_rows').click(function() {\n\nvar rows = $(\"#my_table tr\").size();\n\nalert('Total Rows: '+rows);\n\n});\n\n&lt;\/script&gt;<\/pre>\n<p>The above code produces the same result as the earlier code.<\/p>\n<h2>jQuery length vs size()<\/h2>\n<p>Now that you have noticed that both length vs size() do the same thing, then what exactly is the difference between them. Functionality\u00a0wise, there is no difference. They do the same thing.\u00a0<strong>The .length property is preferred because it does not have the overhead of a function call and hence it is quicker to execute<\/strong>.<\/p>\n<p>So now that you know the difference, use .length property from here on and make your code run even more faster.<\/p>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=847\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>That&#8217;s it for now!<\/h5>\n<p>Do you know of any other ways to <em><strong>get table rows count using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Did you want to count the rows of a table using jQuery but did not know where to start from? In \u00a0get\u00a0table rows count\u00a0in jQuery by using just 1 line of code. Follow along to learn how.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,75,41],"class_list":["post-847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-table","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-dF","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=847"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/847\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}