我沒有從表格行中通過 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() {} 而不是 () => {} 箭頭 function 時，它起作用了！

Answer 1

您不必在表定義后使用 jquery 代碼。 您可以通過在表格中添加 onclick function 來獲取包含單擊的按鈕的行的 ID。 只要您使用循環制作表格，您就知道模板中的 id。 請嘗試在 html 中的onclick=""中添加<%= medicines[i].id %> 。 抱歉，我不是 <% 代碼專家，所以不知道如何在 html 中插入 <% 代碼。

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

您可以使用data-attribute ，使用 class 作為按鈕作為選擇器

<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

當我將代碼更改為下面的代碼時，它運行良好。 我意識到，箭頭 function 對我不起作用！

 <script> $(document).ready(function() { $("#btn").click(function() { var row = $(this).closest("tr"); var col = row.find("#id").text(); alert(col); }); }); </script>