javascript 如何在javascrpit中单击数组时获取数据

fhity93d  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(103)
$('.table .detailsButton').on('click',function(event){
        
        let productid = document.querySelectorAll('.reqproid').value;
        
        alert(productid);
        
    });

这是我关于Spring的数据

<tr th:each="pendingStock,iStat:${listPenddingByID}" name="line_items">
    <td th:text="${pendingStock.reqproid}" hidden name="reqproid" id="reqproid"class="reqproid"></td>
    <td>
        <a style="padding: 10px;" id="detailsButton" class="detailsButton"><i class="ti- pencilalt">View</i></a>
    </td>
</tr>

当我单击“oh”视图时,显示警报reqproid的示例

sy5wg1nm

sy5wg1nm1#

由于您希望将View按钮与按钮所在行的特定值相关联,因此不应使用document.querySelectorAll('.reqproid'),因为它将返回页面上该类的所有元素。
下面是你可以做的:

$('.table .detailsButton').on('click', function(event) {
  const row = event.target.parentNode.parentNode.parentNode;
  const productid = row.querySelector('.reqproid').innerText;
  alert(productid);
});
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <table class="table">
    <tr th:each="pendingStock,iStat:${listPenddingByID}" name="line_items">
      <td th:text="${pendingStock.reqproid}" hidden name="reqproid" id="reqproid" class="reqproid">1234</td>
      <td>
        <a style="padding: 10px;" id="detailsButton" class="detailsButton"><i class="ti- pencilalt">View</i></a>
      </td>
    </tr>
  </table>
</body>

</html>

请让我知道这是否有帮助。

相关问题