【问题标题】:Append data in each <td> with AJAX/JQUERY to a table generated from JSP使用 AJAX/JQUERY 将每个 <td> 中的数据附加到从 JSP 生成的表中
【发布时间】:2025-12-07 03:25:01
【问题描述】:

我有一个充满描述和 id 编号的数据库,表格中填充了它们,如下所示:

index.jsp

<table>
    <tr>
        <td>Name:</td>
        <td>Id:</td>
    </tr>
    <c:forEach items="${employee}" var="employee">
        <tr>
            <td><c:out value="$employee.description"></c:out></td>
            <td class="id-value" id="id"><c:out value="$employee.id"></c:out></td>
        </tr>
        </c:forEach>
</table>

效果很好,所有值都显示在表格中。我还有一个服务,它将 ID 作为参数并返回特定员工的名字和姓氏 - 我想将其附加到每条记录的表中,以便它们在页面加载时显示 - 删除需要在数据库中存储更多值。这是我当前的代码:

function.js

$(document).ready(function(request, response) {
    var id = $('#id').text();
    var serviceUrl = 'http/service/example';

  $.ajax({
    type: 'GET',
    url: serviceUrl + id,
    cache: true,
    success: function(data) {
    $.map(JSON.parse(data), function(item) {
        $('td.id-value').append(' ' + item.FNAME + ' ' + item.LNAME);
   });
 }
});
});

发生的情况是,当页面加载时,id 列充满了所有正确的 id 编号,但它们都一遍又一遍地附加了相同的名字和姓氏(第一个 id 的名字/姓氏) .

如何才能调用该列中的每个值?

json 响应

 {FNAME: "FIRSTNAME", LNAME: "LASTNAME"}

【问题讨论】:

  • 所有带有 id 的 &lt;td&gt; 元素都具有相同的 id 属性值。这可能是根本原因。
  • @Ivan 更改 id 的名称并没有改变任何东西。
  • 你把它改成什么了? @Ivan 的观点是你所有的行都有相同的 id,不管那是什么。
  • @Drewness 我将 id 更改为 #test-id,但我只是在我希望附加服务调用的值的单行上声明一个 id。问题是该服务只被调用一次并重复它找到的第一个 id 的值,而不是对每一行中的每个 id 进行调用。我不知道如何做到这一点。

标签: javascript java jquery html ajax


【解决方案1】:

看起来你需要得到这样的元素列表

$("td[id='id']").each(function(e) {
  var elem = $(this)
  var id = elem.text();
  $.ajax({
    type: 'GET',
    url: serviceUrl + id,
    cache: true,
    success: function(data) {
      $.map(JSON.parse(data), function(item) {
      elem.append(' ' + item.FNAME + ' ' + item.LNAME);
  });
})

【讨论】:

  • 太棒了!那效果很好。我现在在浏览器控制台中收到“elem.append 不是函数”错误。有什么解决方法吗?
  • @Evan,奇怪,我检查过 jQuery 3.3.1 并且它可以工作。您可以在该行设置断点并检查哪些方法可用于 elem
  • @Evan,您可以尝试使用elem.text(elem.text() + ' ' + item.FNAME + ' ' + item.LNAME);,但您最好使用调试器来检查问题所在。
  • 我会试一试,看看错误是否消失,并接受这个答案,因为它确实解决了我的问题。谢谢!
猜你喜欢
相关资源
最近更新 更多
热门标签