我没有从表行中通过 jquery 中的 id 获取特定值，它显示“未定义”

Question

单击添加到购物车 btn 时，我试图从表格行中获取值。桌子在这里。

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

而 Jquery 代码是...

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

我应该得到我单击的行的特定列的值。但在警报中显示未定义！

如何从我点击表格的行中获取 id="id" 的值？

更新：当我在点击事件中使用 function() {} 而不是 () => {} 箭头函数时，它起作用了！

Answer 1

您不必在表定义后使用 jquery 代码。 您可以通过在表中添加 onclick 函数来获取包含您单击的按钮的行的 ID。 只要您使用循环制作表格，您就知道模板中的 id。 请尝试在您的 html 中的 onclick="" 中添加 <%= medicines[i].id %>。 抱歉，我不是

Answer 2

按照以下步骤操作：

1. 只需在td 的按钮上添加一个点击事件。
2. 通过$(this).closest("tr");找到最近点击的按钮行。
3. 使用$row.find("td:nth-child(1)").text();从行中查找特定单元格，这里第一个孩子是id所以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: 由于您有多行，您可以通过设置class而不是id来使用按钮点击事件：

$(".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>

Answer 3

您可以使用数据属性，使用按钮类作为选择器

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

并在事件监听器中获取如下：

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

或者找到被点击的行，得到id

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

Answer 4

当我将代码更改为下面的代码时，它运行良好。我意识到，箭头功能对我不起作用！

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

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