Solved

How do I find/select my table and rows with jQuery?

Posted on 2014-10-07
5
144 Views
Last Modified: 2014-10-20
This is my table declaration

<table id="tblMngr" align="center" cellpadding="2" cellspacing="3" width="100%" class="tblMngr">

how do i find it and its rows using jQuery? I've tried:


        $(document).ready(function () {
            $('tblMngr tr').each(function () {
                var cell = $.trim($(this).find('td').text());
                if (cell.length == 0) {
                    console.log('empty');
                    $(this).addClass('nodisplay');
                }
            });
        });

        $(document).ready(function () {
            $("tblMngr tr").each(function () {
                var cell = $.trim($(this).find('td').text());
                if (cell.length == 0) {
                    console.log('empty');
                    $(this).addClass('nodisplay');
                }
            });
        });

        $(document).ready(function () {
            $(".tblMngr tr").each(function () {
                var cell = $.trim($(this).find('td').text());
                if (cell.length == 0) {
                    console.log('empty');
                    $(this).addClass('nodisplay');
                }
            });
        });

        $(document).ready(function () {
            $('.tblMngr tr').each(function () {
                var cell = $.trim($(this).find('td').text());
                if (cell.length == 0) {
                    console.log('empty');
                    $(this).addClass('nodisplay');
                }
            });
        });

        $(document).ready(function () {
            $("[id$=tblMngr]").each(function () {
                var cell = $.trim($(this).find('td').text());
                if (cell.length == 0) {
                    console.log('empty');
                    $(this).addClass('nodisplay');
                }
            });
        });

Open in new window

Nothing seems to be working.
0
Comment
Question by:mikesExpertExchange
[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
5 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40366581
You can address the <td> elements directly
$(function() {
  $('#tblMngr td').each(function() {
    var text = $(this).text().trim();
    if (text.length == 0) {
      console.log('empty');
      $(this).addClass('nodisplay');
    }
  });
});

Open in new window

0
 
LVL 75

Expert Comment

by:käµfm³d 👽
ID: 40366690
Your problem, as julianH demonstrates, is that you are trying to access the table by its id, but you are not using the correct syntax. jQuery uses the # symbol to denote ids. If you include that, as julianH did, then it should find your table.

By the way, the dot is used to locate by class name. So your use of:

$(".tblMngr tr")

...should have worked as well, since you have a class name of "tblMngr" on that table. Not using either a # or a . would mean that you are trying to find an HTML element by name [e.g. $("table") ].
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 40366786
The reason his code does not work is that he is using .find() on the td elements which is returning an array - which he is not iterating over. One solution would have been to do a .each() on the td elements within the row but makes no sense - when you can do it directly against the td's themselves.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40366790
Your code look fine for me : http://jsfiddle.net/b6od2hzt/
        $(document).ready(function () {
            $(".tblMngr tr").each(function () {
                var cell = $.trim($(this).find('td').text());
                if (cell.length == 0) {
                    console.log('empty');
                    $(this).addClass('nodisplay');
                }
                else {
                    alert( cell );
                }
            });
        });

Open in new window

0
 
LVL 1

Author Closing Comment

by:mikesExpertExchange
ID: 40392899
Thank you.
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery menu problem in an older browser 6 31
asp.net mvc5 6 33
Form submit takes only for one form 23 54
Add Promise to Existing Code 6 30
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

739 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