knockout.js 如何使用Json对象动态填充添加的输入字段

qq24tv8q  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(230)

我有一个输入字段的表,我可以在KnockoutJS的帮助下动态添加行

<table id="sTypeTable" class="table table-bordered" hidden="hidden">
         <tr>
             <th> Name </th>
             <th> Value </th>
             <th> <a class="btn btn-primary btn-sm"  onclick="addReqField(0);"><i class="fa fa-plus"></i></a></th>
         </tr>
<!-- ko foreach: {data: requestFields, as: 'reqField'} -->
        <tr id="sRow">
           <td>
              <input id="sName" data-bind="value: reqField[0]" onblur="createJSON()"/>
           </td>
           <td>
              <input id="sValue" data-bind="value: reqField[0]" onblur="createJSON()"/>
           </td>
           <td>
              <a class="btn btn-warning  btn-sm" data-bind="click: removeResField2" ><i class="glyphicon glyphicon-remove"></i></a>
          </td>
       </tr>
<!-- /ko -->
 </table>
  <div class="col-md-11 ">
    <textarea style="font-size: larger; min-height: 200px" class="form-control" id="requestData" oninput="storeValueOfTextArea()"></textarea>
  </div>

根据这些输入,我在textarea(id=“requestData”)上生成了以下Json对象

[
  {
    "users": [
      {
        "name": "John",
        "value": "12"
      },
      {
        "name": "Sarah",
        "value": "13"
      },
      {
        "name": "Tom",
        "value": "14"
      }
    ]
  }
]

它工作得很好,但是现在我需要从Json对象填充这些输入字段,当对象进入文本区域时我已经尝试了以下方法

<script th:inline="javascript">

 function storeValueOfTextArea() {
      var lines = $('#requestData').val();
      var texts = JSON.parse(lines);

  for (var i=0; i!== texts[0].users.length;i++){
      addReqField();  // method for adding new row of input fields

      let  v = texts[0].users[i];
      $("tr[id=sRow]").each(function() {
          $("#sName").val(v.name);
          $("#sValue").val(v.value);
      });
  }
 </script>

但结果是只有第一个输入字段获得最后一个对象

{
   "name": "Tom",
   "value": "14"
 }

其他保持为空

bjg7j2ky

bjg7j2ky1#

$("tr[id=sRow]").each(function() {
      $("#sName").val(v.name);
      $("#sValue").val(v.value);
  });

这样做似乎不太好。您应该根据要填充数据的用户的索引来获得所需的行索引。现在,这样做的目的是在for循环的所有迭代中,用相同的用户数据填充每一行。最后,最后一个用户数据将出现在所有行中。

anhgbhbe

anhgbhbe2#

我认为问题在于,您为每个创建的新行指定了相同的IDsRow
所以在你的循环中

$("tr[id=sRow]").each(function() {
      $("#sName").val(v.name);
      $("#sValue").val(v.value);
  });

在最后一次迭代中,这将使用对象的最后一个值Tom14填充所有sRow元素。请尝试为您的行指定一个唯一的ID,如sRow +一个从0开始的计数器sRow0sRow1..

z31licg0

z31licg03#

谢谢所有回答这个问题的人。我已经用这种方法解决了这个问题

for (let i=0; i!== texts[0].values.length;i++){
      addReqField();
      let  v = texts[0].values[i];
          $("tr[id=sRow]").each(function(index) {
              if (index === i){
                 $(this).find("#sName").val(v.name);
                 $(this).find("#sValue").val(v.value);
               }

           });
 }

相关问题