Steve Beaty Steve Beaty - 1 month ago 6
jQuery Question

JQuery get values from html table

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

Answer

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

Comments