Javascript 使用jQuery生成的表填充输入字段

我正在尝试填充模式的输入框中的字段。单击表中的

编辑

按钮后，将显示我的模式，它应根据单击按钮的表行填充字段。我仅使用jQuery生成表，并使用JSON获取数据。这是生成我的表的代码：

$.getJSON("${pageContext.request.contextPath}/hostJSON", function (data) {
                var $table = $("#hostTable");
                $.each(data, function (i, h) {
                    if (h.status === "true") {
                        h.status = "<label class=\"label\" style=\"background-color: #b2c4aa;color:white\">Waiting</label>";
                    } else {
                        h.status = "<label class=\"label\" style=\"background-color: #FF8668;color:white\">Done</label>";
                    }
                    var $tr = $("<tr/>").attr('style', 'font-size:90%');
                    $("<td/>").html(h.id).appendTo($tr);
                    $("<td/>").html(h.name).appendTo($tr);
                    $("<td/>").html(h.contact).attr('style', 'text-align:center').appendTo($tr);
                    $("<td/>").html(h.email).attr('style', 'text-align:center').appendTo($tr);
                    $("<td/>").html(h.address).appendTo($tr);
                    $("<td/>").html(h.status).attr('style', 'text-align:center').appendTo($tr);
//BELOW IS THE REQUIRED LINE, WHICH IS A BUTTON:
                    $("<td/>").html("<span class=\"hostEditBtn\" data-host-name=\""+h.name+"\" data-toggle=\"modal\" data-target=\"#editEventHostModal\"><button class=\"btn btn-xs\" style=\"background-color:#b2c4aa;color:white\" data-toggle=\"tooltip\" title=\"Edit\"><span class=\"glyphicon glyphicon-pencil\"></span> Edit</button></span>").attr('style', 'text-align:center').appendTo($tr);
                    $tr.appendTo($table);
                });
            });

我只包括

名称

部分，以免把我的帖子弄得乱七八糟。

我觉得我还应该提到，我在这个项目中总共有3个

.jsp

文件，即

index.jsp

，

modals.jsp

，和

jquery.jsp

，我将它们包括在我的

index.jsp

文件中，如下所示：

<%@include file="[name of file].jsp"%>

为什么不起作用？是因为自定义属性（

数据主机名

）是通过jQuery生成的吗？我怎样才能让它工作？

试试这个：

 $('body').on('click', '#hostEditBtn', function () {
      var attrValue = $(this).attr('data-host-name')
      $("#hostName").val(attrValue);
   });

---

您可以尝试此代码段。因此，为了实现这一点，我没有像我在评论中提到的那样进行更改，只需将

#hostEditBtn

ID更新为类

.hostEditBtn

，并在

内部对代码进行重构。请尝试以下代码片段：

在代码片段（而不是ajax响应）中，我定义了一个数据对象，从中填充数据，并根据您的逻辑执行操作


var$table=$（“#hostTable”）；
风险值数据=[{
“状态”：正确，
“名称”：“test1”，
“联系人”：“12321312312”，
“电子邮件”：test1@gmail.com',
“地址”：“测试地址2”
},{
“状态”：假，
“名称”：“test2”，
“联系人”：“12321312312”，
“电子邮件”：test2@gmail.com',
“地址”：“测试地址2”
}]
$。每个（数据、函数（i、h）{
如果（h.status==“true”）{
h、 status=“Waiting”；
}否则{
h、 status=“完成”；
}
var$tr=$（“”）.attr（'style'，'font size:90%）；
$（“”）.html（h.id）.appendTo（$tr）；
$（“”）.html（h.name）.appendTo（$tr）；
$（“”）.html（h.contact）.attr（'style'，'text align:center'）.appendTo（$tr）；
$（“”）.html（h.email）.attr（'style'，'text align:center'）.appendTo（$tr）；
$（“”）.html（h.address）.appendTo（$tr）；
$（“”）.html（h.status）.attr（'style'，'text align:center'）.appendTo（$tr）；
$（“”）.html（“编辑”）.attr（'style'，'text align:center'）.appendTo（$tr）；
$tr.appendTo（$table）；
});
$（.hostEditBtn”）。在（'click'，函数（）{
$（“#editEventHostModal#hostName”）.val（$（this.attr（'data-host-name'））；
});

&时代；
接近
谢谢您的回复，我试过了，但没有成功。请检查您在$（“#hostEditBtn”）上获得的元素数。它是返回单个元素还是一个数组？如何检查得到的元素数？此外，正如@VishalTajPM所指出的，我必须做一些更改，我将#hostEditBtn改为.hostEditBtn.谢谢，@CalvinNunes。我知道我可以提供更多的信息。不管怎样，他找到了解决办法。我很高兴。我提供了我的答案，我认为您在页面上保持Id“hostEditBtn”的唯一性。因此，我的任务是为动态添加的元素附加一个事件@VishalTajPM向您详细解释了我的意思。@VishalTajPM模式是通过以下代码条打开的
data toggle=\“modal\”数据目标=\“\editEventHostModal\”
位于相同的
标记中。您需要更新的第一件事是将
#hostEditBtn
ID更改为class
。hostEditBtn
在进行迭代时，可能存在多个具有相同ID的跨度。在
中，ID
对于整个
DOM
@VishalTajPM非常感谢为了指出这一点，我完全忘记了这一点，我也会在这篇文章中更新它。我做了相应的更改，但它仍然没有填充输入框。哇，非常感谢。我只是在我的项目上复制并粘贴了你的代码，并根据我自己的数据做了一些调整，它工作得非常顺利。不知道怎么做，但它起作用了。干杯
 $('body').on('click', '#hostEditBtn', function () {
      var attrValue = $(this).attr('data-host-name')
      $("#hostName").val(attrValue);
   });