Solved

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

Posted on 2014-10-07
5
141 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
5 Comments
 
LVL 54

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 54

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
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…

816 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now