在 foreach 循环中获取 TD 的值

Getting the value of TD in a foreach loop

本文关键字：TD 的值 获取 foreach 循环      更新时间：2023-09-26

我有这个代码，它显示了我的项目列表

<tbody class="table-color2">
    <c:forEach var="defect" items="${defectList}">
        <tr>
            <td id="defectId"><a onclick="getDefectId()">${defect.id}</a></td>
            <td>${defect.createdDate}</td>
            <td>${defect.reportedBy.firstName}</td>
            <td>${defect.title}</td>
            <td>${defect.bugtype.description}</td>
            <td>${defect.status.description}</td>
            <td>${defect.priority.description}</td>
        </tr>
    </c:forEach>
</tbody>

我试图做的是在单击时获取 td id="defectId"的值，我的 onclick 的 jquery 脚本是这样的：

function getDefectId(){
    var defectId = $(' #defectId ').val();
    alert("Defect ID " + defectId);
}

但目前，我得到的值是未定义的，我如何获得该值？

您有几个问题。首先，您将相同的id附加到循环中，这将导致无效的重复项。此外，a元素没有要检索的值，因此您需要使用 text() 。最后请注意，使用当前方法意味着您需要将单击元素的this引用传递给函数。

但是，您可以通过使用类并在 JS 中挂接事件来整理所有这些。试试这个：

<tbody class="table-color2">
    <c:forEach var="defect" items="${defectList}">
        <tr>
            <td class="defect"><a href="#">${defect.id}</a></td>
            <td>${defect.createdDate}</td>
            <td>${defect.reportedBy.firstName}</td>
            <td>${defect.title}</td>
            <td>${defect.bugtype.description}</td>
            <td>${defect.status.description}</td>
            <td>${defect.priority.description}</td>
        </tr>
    </c:forEach>
</tbody>

$(function() {
    $('.defect a').click(function(e) {
        e.preventDefault();
        console.log($(this).text());
    });
});

工作示例

您可以执行以下操作（请记住，id必须是唯一的）：

<td class="defectId"><a onclick="getDefectId(${defect.id})">${defect.id}</a></td>

在你function

： 
function getDefectId(value){
  alert("Defect ID " + value);
}

试试这个：使用text()而不是val()，因为你想知道td里面的文本，而不是input元素的值。

编辑： - 对不起，错过了有多个td。在这种情况下，您不得对所有 tds 使用相同的 id。只需使其类化并执行以下功能更改即可。

function getDefectId(){
   var defectId = $('.defectId').text();
  alert("Defect ID" + defectId);
}

我建议使用jQuery事件处理程序而不是调用javascript函数。请参阅下面的代码

HTML：删除点击调用

<td class="defectId"><a href="#">${defect.id}</a></td>

jQuery：注册一个点击处理程序并读取文本

$(function(){
   $('.defectId a').click(function(){
      var defectId = $(this).text();
      alert(defectId);
   });
});
相关文章：