Question

我正在尝试填充模态输入框中的字段。单击表格中的Edit按钮后出现我的模态，它应根据单击按钮的表格行填充字段。我仅使用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);
                });
            });

单击上述按钮后，它会成功打开我的模态，但不会填充该字段。

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

我只包括Name部分，以免让我的帖子变得杂乱无章。

我觉得我还应该提一下，我在这个项目中总共有3个.jsp个文件，即我index.jsp，modals.jsp和jquery.jsp index.jsp这样的文件：

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

为什么不工作？是因为自定义属性（data-host-name）是用jQuery生成的吗？我怎样才能做到这一点？

Answer 1

您可以尝试使用此代码段。所以为了达到这个目的，我没有像我在评论中提到的那样改变，只需将#hostEditBtn ID 更新为类 .hostEditBtn并在{ {1}}只是重构了代码。请试试这个片段：

在代码段内，而不是你的ajax响应我定义了一个数据对象，从中填充这些数据根据你的逻辑进行操作。

＆＃13;

.hostEditBtn

＆＃13;

var $table = $("#hostTable");
var data = [{
 "status": true,
 "name": "test1",
 "contact": "12321312312",
 "email": 'test1@gmail.com',
 "address": 'test address 2'
},{
 "status": false,
 "name": "test2",
 "contact": "12321312312",
 "email": 'test2@gmail.com',
 "address": 'test address 2'
}]
$.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);
  $("<td/>").html("<span class=\"hostEditBtn\" data-host-name=\""+h.name+"\" data-toggle=\"modal\" data-target=\"#editEventHostModal\"><button class=\"btn btn-sm\" 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);
});
                
                
                
$(".hostEditBtn").on('click', function () {
    $("#editEventHostModal #hostName").val($(this).attr('data-host-name'));
});

＆＃13;

Answer 2

试试这个：

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

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

2 个答案: