How to get data when I click on array in javascrpit

May 15, 2023

$('.table .detailsButton').on('click',function(event){
        
        let productid = document.querySelectorAll('.reqproid').value;
        
        alert(productid);
        
    });

This is my Data on 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>

Example that When I Click oh view after that is show alert reqproid

>Solution :

Since you want to associate your View button with a specific value that is on the same row with the button, you shouldn’t use document.querySelectorAll('.reqproid') that will return you all elements of this class on the page.

Here is what you can do instead:

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

Please let me know if this helps.