JQuery get values from html table

Question

I am attempting to pull data from a dynamic table using JQuery, but every way I've tried turns the values into something else (the below code will return an "l" instead of the N/A I was expecting. I have tried using .each and .map as the function as well as .val .html and as you can see .text to pull the data. I am stuck as to why and what I am doing wrong. Any help would be greatly appreciated.

HTML

    <table id="attendees" class="attendees">
    <thead>
        <tr style="border-bottom: double;border-color: #007fff" ;="">
            <th>Full Name</th>
            <th>Membership Type</th>
            <th>Membership Expiration Date</th>
            <th>Free Vouchers</th>
            <th>Classes From Pack Remaining</th>
            <th>Yelp Check in</th>
            <th>Payment Option</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        <tr class="data">
            <td>Students Name</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>0</td>
            <td>0</td>
            <td>Yes</td>
            <td>
                <ul id="list">
                    <select id="payment" name="payment">
                        <option>Cash/Credit</option>
                        <option>Free Voucher</option>
                        <option>Yelp Check-in</option>
                    </select>
                </ul>
            </td>
            <td>
                <div><a href="#" class="remove"><p>Remove</p></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JQuery

$("#submit").live('click', function (e) {
           $("#attendees tr.data").map(function (index, elem) {
               var x = $(this);
               var cells = x.find('td');
               var $data = cells.text();
               //alert($data[1]);
                if ($data[1] == "N/A") {
                alert(true);    
               }

          });
            e.preventDefault();

        });

Final Solution

Thanks first of all to everyone who chimed in, I honestly learned a little something from each persons answer. In the end this is what I settled on below. In hindsight I probably should of given a more thorough description on what I was attempting to accomplish. Which was to scan multiple rows of data and do something based on the info found in each row. To accomplish this I was forced to separate the tr and td .each functions. This allowed me to scan row by row and still get the individual data.
Thanks again for everyone's help especially @TechHunter

$("#submit").on('click', function (e) {
    e.preventDefault();

    $("#attendees tbody tr").each(function(i) {
    var $data= [];
    var x = $(this);
    var cells = x.find('td');
    $(cells).each(function(i) {
    var $d= $("option:selected", this).val()||$(this).text();
    $data.push($d);
    });      
        if ($data[1] == "N/A") {
           doSomething(); 
        }
    });
});

Solution 1

Simplest answer would be to add a class when you need to retrieve a value :

HTML

<table id="attendees" class="attendees">
    <thead>
        <tr style="border-bottom: double;border-color: #007fff" ;="">
            <th>Full Name</th>
            <th>Membership Type</th>
            <th>Membership Expiration Date</th>
            <th>Free Vouchers</th>
            <th>Classes From Pack Remaining</th>
            <th>Yelp Check in</th>
            <th>Payment Option</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        <tr class="data">
            <td class="inputValue">Students Name</td>
            <td class="inputValue">N/A</td>
            <td class="inputValue">N/A</td>
            <td class="inputValue">0</td>
            <td class="inputValue">0</td>
            <td class="inputValue">Yes</td>
            <td>
                <ul id="list">
                    <select id="payment" class="inputValue" name="payment">
                        <option>Cash/Credit</option>
                        <option>Free Voucher</option>
                        <option>Yelp Check-in</option>
                    </select>
                </ul>
            </td>
            <td>
                <div><a href="#" class="remove"><p>Remove</p></a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Javascript

$("#submit").on('click', function (e) {
    e.preventDefault();
    var data = $("#attendees tr.data").map(function (index, elem) {
        var ret = [];
        $('.inputValue', this).each(function () {
            var d = $(this).val()||$(this).text();
            ret.push(d);
            console.log(d);
            if (d == "N/A") {
                console.log(true);
            }
        });
        return ret;
    });
    console.log(data);
    console.log(data[0]);
});

It's easier and you only retrieve value you want to retrieve. Fast to implement and to maintain.

Fiddle here

Solution 2

You should use on() in place of live() (IF your JQuery version supports it) REASON . Just modified your jquery a little bit like this and it worked :

JQuery-

$("#submit").on('click', function (e) {

       $("#attendees tr.data").map(function (index, elem) {
           $(this).find('td').each(function(){
           var $data = $(this).html();
           alert($data);
            if ($data == "N/A") {
            alert(true);    
           }
        });
      });
        e.preventDefault();

    });

UPDATE:-

Just check whether there is a selectbox in the td . If it is, then you can get its as shown below :

if($(this).find("select").length > 0)
     {
         alert("found select")
         alert($(this).find("select").val())
     }

Demo here :- FIDDLE (The updated one showing the value selected in the selectbox )

Comments

[Steve Beaty]

everything worked except the cell with the drop down box came back as html instead of the value. any suggestions?

[Steve Beaty]

thanks for your response, this worked for the most part but the cell with the drop down list came back with all the options instead of the one chosen

[Sikshya Maharjan]

Just for usability purposes, could I suggest using console.log() instead of alert() (there were lots of alerts being fired...)?

[TecHunter]

@SteveBeaty use .val() instead of .text() but also check my answer

[Steve Beaty]

thanks, I like your simplistic approach. Though to get the value for the drop down list i had to use :selected as in var $data = $("option:selected", this).val()||$(this).text(); The problem I have now is that when i try to access each individual value from the var as in data[0] I am getting only the first character returned. which of course doesn't help the if statement

[Steve Beaty]

@TecHunter please see my response to your answer and by the way for that portion i had to end up using var $data = $("option:selected", this).val()||$(this).text();

[TecHunter]

@SteveBeaty you don't need to retrieve the :selected as the .val() function already do it for you. and sorry I totally missed your point about the data here you check my update

[Steve Beaty]

Hey @TecHunter Check my edit to the original post. I couldn't of gotten that far without your input. Though i had to keep the option:selected in the code, on its surface i understand why i shouldnt need it but honestly it didn't work without it. Perhaps a bug... Either way thanks again for your help.

[qwerty]

@SteveBeaty You can also check if there is any selectbox in a td while traversing. And if it is, you can easily get the selected value from it. Check the updated answer.

[TecHunter]

@SteveBeaty oh ok, you should accept someone's answer at least and vote each post helped you. np for the help