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(); 
        }
    });
});

TecHunter · Accepted Answer · 2013-05-29 09:27:32Z

3

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

edited May 29, 2013 at 9:27

answered May 29, 2013 at 7:07

TecHunter

6,1712 gold badges32 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Steve Beaty Over a year ago

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

TecHunter Over a year ago

@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 Over a year ago

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.

TecHunter Over a year ago

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

qwerty · Accepted Answer · 2013-05-29 11:46:58Z

1

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 )

edited May 29, 2013 at 11:46

answered May 29, 2013 at 4:17

qwerty

2,5123 gold badges35 silver badges58 bronze badges

5 Comments

Steve Beaty Over a year ago

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

David Thomas Over a year ago

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

TecHunter Over a year ago

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

Steve Beaty Over a year ago

@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();

qwerty Over a year ago

@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.

tymeJV · Accepted Answer · 2013-05-29 04:06:31Z

0

A couple things, assuming you're using a recent version of jQuery, you're going to want to replace live() with on().

Also, you need to iterate over you cells to find what you're looking for, simply placing it in a variable won't do the trick.

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

    //time to iterate over the cells
    $("#attendees tr.data td").each(function(i) {
        if ($(this).text() == "N/A") {
            alert("Found it on cell index: " +i);
        }
    });
});

If you want to use .map() to return an array of the td text, you can do:

var tdArray = $("#attendees tr.data td").map(function() {
    return $(this).text();
}).get();

answered May 29, 2013 at 4:06

tymeJV

105k14 gold badges165 silver badges158 bronze badges

1 Comment

Steve Beaty Over a year ago

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

Collectives™ on Stack Overflow

JQuery get values from html table

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related