Solved

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

Posted on 2014-10-07
5
140 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 52

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 52

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
New to SOAP and need some direction 10 42
JavaScript: Issue with onClick 5 35
SQL Login 17 38
Angular - disable input field on page load 4 12
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
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…

911 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

21 Experts available now in Live!

Get 1:1 Help Now