英文:
How to get data when I click on array in javascrpit
问题
Sure, here's the translated code portion:
$('.table .detailsButton').on('click', function(event) {
let productid = document.querySelectorAll('.reqproid').value;
alert(productid);
});
And the translated text:
"This is my Data on spring
Example that When I Click on View, after that it shows an alert with reqproid."
英文:
$('.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
答案1
得分: 0
由于您想将您的“查看”按钮与与按钮在同一行的特定值关联起来，您不应该使用`document.querySelectorAll('.reqproid')`，因为它会返回页面上该类的所有元素。
以下是您可以做的替代方法：
<!-- 开始代码段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-js -->
$('.table .detailsButton').on('click', function(event) {
const row = event.target.parentNode.parentNode.parentNode;
const productid = row.querySelector('.reqproid').innerText;
alert(productid);
});
<!-- 语言：lang-html -->
<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>
<!-- 结束代码段 -->
请告诉我这是否对您有所帮助。
英文:
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:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('.table .detailsButton').on('click', function(event) {
const row = event.target.parentNode.parentNode.parentNode;
const productid = row.querySelector('.reqproid').innerText;
alert(productid);
});
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Please let me know if this helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论