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?

Answer 1

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

Answer 2

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