Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-10-07
5
Medium Priority
?
147 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:Michael Sterling
5 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 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 60

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 83

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:Michael Sterling
ID: 40392899
Thank you.
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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
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

783 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