我有此输入字段表,可以在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对象填充这些输入字段, 当对象输入到textarea中时。 我已经尝试过以下方式
<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"
}
其他人空着
答案 0 :(得分:0)
$("tr[id=sRow]").each(function() {
$("#sName").val(v.name);
$("#sValue").val(v.value);
});
这似乎不好。您应该根据用户要为其填充数据的索引来获得所需的行索引。现在,此操作是在for循环的所有迭代中用相同的用户数据填充每一行。最后,最后一个用户数据将出现在所有行中。
答案 1 :(得分:0)
我认为问题在于您要为每个新创建的行赋予相同的ID,即 sRow 。
所以在循环中
$("tr[id=sRow]").each(function() {
$("#sName").val(v.name);
$("#sValue").val(v.value);
});
在上一次迭代中,这将用对象的最后一个值 Tom 和 14 填充所有sRow元素。 尝试给您的行一个唯一的ID,例如sRow +从0开始的计数器sRow 0 sRow 1 ...
答案 2 :(得分:0)
感谢所有回答此问题的人。 我已经通过这种方式解决了这个问题
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);
}
});
}