How to post the value of a specific cell of a table using jQuery

Question

I'm trying to use jQuery to capture the value of two cells from a table. My table looks like this:

    <table id="searchByLocationResults" class="table table-hover table-striped" cellspacing="0" style="border-collapse:collapse;">
        <tbody>
            <tr>
                <th scope="col">View Detail</th>
                <th scope="col">Quantity</th>
                <th scope="col" style="display:none;">Location ID</th>
                <th scope="col" style="display:none;">Item Type ID</th>
            </tr>
            @For Each item In Model
                Dim currentItem = item    
                @<tr>
                     <td><a class="btn btn-default btn-sm" onclick="viewDetails(this)">View Detail</a></td>
                     <td>
                         @Html.DisplayFor(Function(modelItem) currentItem.COUNT)
                     </td>
                     <td style="display:none;" class="locationID">
                         @Html.DisplayFor(Function(modelItem) currentItem.Unique_Location_ID)
                     </td>
                     <td style="display:none;" class="itemType">
                         @Html.DisplayFor(Function(modelItem) currentItem.Item_Type_Identifier)
                     </td>
                </tr>
            Next
        </tbody>
    </table>

As you can see there is a 'view details' button on each row. What I need to do is capture the display:none values in the cells with class=locationID and class=itemType when the button is clicked, only for the row that the button is clicked on. I have seen multiple solutions on stack over flow here, here and quite a few others. Most of these are dealing with capturing an entire row of values.

I have tried a few different scripts:

 function viewDetails(clickedRow) {
                var locationID = $(this).find(".selected td:.locationID").val();
                alert(locationID);

and:

function viewDetails(clickedRow) {
    var locationID = tr.find(".locationID").val();
    alert(locationID);

as well as a few others.

How do you capture the values of the cells locationID and itemType for the row that 'View Details' is clicked on?

score 1 · Answer 1 · answered Jul 28 '15 at 14:37

1

You are almost there. You just need to use the .text() method in Jquery

function viewDetails(clickedRow) {
    var locationID = tr.find(".locationID").text();
    alert(locationID);

answered Jul 28 '15 at 14:37

mitch

1,821
14
14

this does not work, I never hit the alert. I am hitting the function though, verified with an alert before the variable assignment. And I've quadruple checked the spelling. – rogerdeuce Jul 28 '15 at 14:48
Sorry. I assumed your tr was already obtained at the row in question. – mitch Jul 28 '15 at 15:11

score 1 · Accepted Answer · answered Jul 28 '15 at 14:38

I would say to try the index. This only works if the buttons and text areas have unique classes so the count works correctly. Then once you have the index use the eq() to get the data.

var index = $(".btn-sm").index();
var locationId = $(".locationID").eq(index).text();

How to post the value of a specific cell of a table using jQuery

2 Answers2