I'm not getting the specific value by id in jquery from the table row, it shows 'undefined'

user_10570045 0
Viewed 186

I'm trying to catch the value from the table row when clicking on the add to cart btn. The table is here.

<table class="table" id="myTable">
    <thead class="thead-dark">
       <tr>
          <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Availability</th>
            <th scope="col">Price</th>
            <th scope="col">Category</th>
            <th scope="col">Type</th>
            <th scope="col">Vendor</th>
            <th scope="col">Handle</th>
           </tr>
      </thead>
      <tbody>

    <% for(var i=0; i < medicines.length; i++) { %>
      <tr>
         <th scope="row"><span id="id"><%= medicines[i].id %></span></th>
         <td><%= medicines[i].name %></td>
         <td><%= medicines[i].availability %></td>
         <td><%= medicines[i].price %></td>
         <td><%= medicines[i].category %></td>
         <td><%= medicines[i].type %></td>
       <td><%= medicines[i].vendor %></td>
         <td>
            <input type="number" id="availability" name="quantity" min="1" max="<%= medicines[i].availability %>" required>
                                               
            <input type="submit" id="btn" class="btn btn-secondary" value="Add to Cart">
         </td>
     </tr>
    <% } %>
                              
  </tbody>
</table>

and Jquery code is...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script>
$(document).ready(() => {
            
    $("#myTable").on('click', '#btn', () => {
        var row = $(this).closest("tr");

        var col = row.find("#id").html();
        alert(col);
    });
            
});
</script>

I should get the value of the specific column of the row I click. But in the alert it shows undefined!

How can I get the value of id="id" from the row I click of the table?

Update: When I used function() {} inside the click event instead () => {} arrow function it worked!

express node.js html jquery javascript
4 Answers

You don't have to use jquery code after table definition. You could get id of row which contains button you click by adding your onclick function inside table. As long as you make your table by using loop, you know id inside your template. Please try add <%= medicines[i].id %> inside your onclick="" inside your html. Sorry, I am not expert at <% code so don't know how to insert <% code inside html.

user_107415680

Follow these steps:

  1. Just add a click event on your td's button.
  2. Find the closest row of the clicked button by $(this).closest("tr");.
  3. Find the specific cell from the row by using $row.find("td:nth-child(1)").text();, here first child is the id so td:nth-child(1).

$("#btn").click(function () {
    var $row = $(this).closest("tr"); // Find the row
    var $text = $row.find("td:nth-child(1)").text(); // Find the text
    alert($text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table" id="myTable">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Availability</th>
            <th scope="col">Price</th>
            <th scope="col">Category</th>
            <th scope="col">Type</th>
            <th scope="col">Vendor</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Napa</td>
            <td>10</td>
            <td>20</td>
            <td>Paracitamol</td>
            <td>B</td>
            <td>ABC</td>
            <td><input type="submit" id="btn" class="btn btn-secondary" value="Add to Cart"></td>
        </tr>

    </tbody>
</table>

Update: Since you have multiple rows, you can use the button click event by setting class rather than the id in this way:

$(".btn").click(function () {
    var $row = $(this).closest("tr");    // Find the row
    var $text = $row.find("td:nth-child(1)").text(); // Find the text
    alert($text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table" id="myTable">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Availability</th>
            <th scope="col">Price</th>
            <th scope="col">Category</th>
            <th scope="col">Type</th>
            <th scope="col">Vendor</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Napa</td>
            <td>10</td>
            <td>20</td>
            <td>Paracitamol</td>
            <td>B</td>
            <td>ABC</td>
            <td><input type="submit" class="btn" class="btn btn-secondary" value="Add to Cart"></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Napa</td>
            <td>10</td>
            <td>20</td>
            <td>Paracitamol</td>
            <td>B</td>
            <td>ABC</td>
            <td><input type="submit" class="btn" class="btn btn-secondary" value="Add to Cart"></td>
        </tr>

    </tbody>
</table>

user_61742710

You can use data-attribute, use a class for button as the selector

<input type="submit" id="btn" class="btn btn-secondary btn-submit" value="Add to Cart" data-id='<%= medicines[i].id %>' >

and in the event listener get it as follow:

$(".btn-submit").click(function () {
  var id = $(this).data('id');
  console.log(id);

or find the clicked row and get id

$(".btn-submit").click(function () {
    var id = $(this).closest('tr').find(":first").text();
            console.log(id);
     });
user_44649880

When I changed the code to this code below, it worked fine. Which I realized, the arrow function didn't work for me!

<script>
$(document).ready(function() {
   $("#btn").click(function() {
        
        var row = $(this).closest("tr");

        var col = row.find("#id").text();
        alert(col);
    });
});
</script>

user_105700450
Related