如何从循环表索引中传递值并显示到输入框中

Question

我一直在尝试从循环表索引中获取值。我想在input 字段中显示它。我可以发送一个字符串，但循环索引不显示在字段中

<div class="form-group">
  <label for="PersonName">Person Name</label>
  <input type="text" class="form-control" id="PersonName" name="PersonName" placeholder="Name">
</div>
<div class="form-group">
  <label for="PersonName">Person Age</label>
  <input type="text" class="form-control" id="PersonAge" name="PersonAge" placeholder="Age">
</div>

            $(function () {
            $.ajax({
                type: "get",
                url: "/Person/getTable",
                dataType: "json",
                contentType: "application/json; charset=utf-8",

                success: function (data) {
                    debugger
                    var i = 1;
                    var j = 1;
                    $(data).each(
                               function () {
                                   $('#mytable').append('<tr><td>' + this.Id + '</td><td>' + this.name + '</td><td>' + this.age + '</td><td>' + this.country + '</td><td>' + this.city + '</td><td> <button class="delbtn" id= "' + this.Id + '"> Delete </button> <button class="editbtn" id= "' + this.Id + '"> Edit </button> </td></tr>')
                                   if (i == data.length)
                                   {
                                       $(".delbtn").click(function () {
                                           var del = $(this).attr('id');
                                           $.ajax({
                                               type: "get",
                                               url: "/Person/delRow",
                                               dataType: "json",
                                               contentType: "application/json; charset=utf-8",
                                               data: { del: del },
                                               success: function (data) {
                                                   alert(data)

                                               },
                                               failure: function (errMsg) {
                                                   alert("failure")
                                               }
                                           })
                                       });
                                       $(".editbtn").click(function () {
                                           var del = $(this).attr('id');
                                           $('#PersonName').val(''); // this is where i want to throw it to the input field
                                           $('#PersonAge').val();

                                       });



                                   }
                                   i = i + 1;



                               })
                }
            })
        });

Answer 1

您可以使用 Jquery 为输入选择相应的值：

$('#PersonName').val($(this).parent().siblings()[1].innerText); 

在上面的代码中：

• $(this) 指的是触发事件的item 意思是按钮
• .parent() 选择按钮的父元素 <td>
• .sibling() 选择 <td> 元素的所有同级元素，这意味着该行中的所有 <td> 元素
• [1] 是第二个 <td>（索引从 0 开始），即“名称”列
• 最后.innerText返回名称列中的文字

您可以查看代码 sn-p 以获得一个工作示例。

注意：我个人会为每一列使用一个数据标签或类，所以如果列顺序改变，代码仍然可以正常工作。 使用数据标签，您的表格行生成代码如下所示：

$('#mytable').append('<tr><td data-Cname="Id" >' + this.Id + '</td><td data-Cname="name">' + this.name + '</td><td data-Cname="age">' + this.age + '</td><td data-Cname="country">' + this.country + '</td><td data-Cname="city">' + this.city + '</td><td> <button class="delbtn" id= "' + this.Id + '"> Delete </button> <button class="editbtn" id= "' + this.Id + '"> Edit </button> </td></tr>')

选择代码如下所示：

$(this).parent().siblings("[data-Cname="name"]).text()

注意 2：有更好的方法来避免列顺序更改问题，但通过它们将超出这个问题的范围。

$(".editbtn").click(function() {
  var del = $(this).attr('id');
  $('#PersonName').val($(this).parent().siblings()[1].innerText); 
  $('#PersonAge').val($(this).parent().siblings()[2].innerText);

});

table {
  border: 1px solid black;
}

table td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="PersonName">Person Name</label>
  <input type="text" class="form-control" id="PersonName" name="PersonName" placeholder="Name">
</div>
<div class="form-group">
  <label for="PersonName">Person Age</label>
  <input type="text" class="form-control" id="PersonAge" name="PersonAge" placeholder="Age">
</div>
<table>
  <th>
    <tr>
      <td>ID</td>
      <td>Name</td>
      <td>Age</td>
      <td>Country</td>
      <td>City</td>
      <td> Buttons</td>
    </tr>
  </th>
  <tbody>
    <tr>
      <td>11</td>
      <td>John</td>
      <td>Doe</td>
      <td>US</td>
      <td>NY</td>
      <td> <button class="delbtn" id="11"> Delete </button> <button class="editbtn" id="11"> Edit </button> </td>
    </tr>
    <tr>
      <td>12</td>
      <td>Jane</td>
      <td>Doe2</td>
      <td>US</td>
      <td>LA</td>
      <td> <button class="delbtn" id="12"> Delete </button> <button class="editbtn" id="12"> Edit </button> </td>
    </tr>
    <tbody>
</table>