在foreach循环中获取TD的值

Question

我有这段代码，向我显示我的物品清单

<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);
}

但是目前，我得到的值是undefined，如何获得该值？

Answer 1

你有几个问题。 首先，您要在循环中添加相同的id ，这将导致重复项无效。 此外， a元素没有一个值来获取，所以你需要使用text() 最后请注意，使用当前方法将意味着您需要将clicked元素的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());
    });
});

工作实例

Answer 2

尝试以下操作：使用text()而不是val()因为您想知道td内的文本，而不是input元素的值。

编辑 ：-抱歉，错过了多个TD。 在这种情况下，不能对所有tds使用相同的ID。 只需使其成为类，然后执行以下功能更改即可。

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

我建议使用jQuery事件处理程序，而不要调用javascript函数。 见下面的代码

HTML：删除onclick调用

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

jQuery：注册单击处理程序并读取文本

$(function(){
   $('.defectId a').click(function(){
      var defectId = $(this).text();
      alert(defectId);
   });
});

Answer 3

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

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

在你的function ：

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