Question

我的任务需要从输入值转换为格式对象数组，如下所示：

[{
    id: 1,
    worker_id: 2,
    status:1
 },{
    id: 2,
    worker_id: 2,
    status: 1
 },{
    id: 3,
    worker_id: 2,
    status:1
}]

我的输入有多行。

<!-- row1 -->
<input type="text" id="id" value="1"/>
<input type="text" id="worker_id" value="2"/>
<input type="text" id="status" value="1"/>

<!-- row2 -->
<input type="text" id="id" value="2"/>
<input type="text" id="worker_id" value="2"/>
<input type="text" id="status" value="1"/>

<!-- row3 -->
<input type="text" id="id" value="2"/>
<input type="text" id="worker_id" value="2"/>
<input type="text" id="status" value="1"/>

<input type="submit" value="submit" />

我如何在jQuery中执行此操作？谢谢你的帮助！

更新

点击按钮提交后，此格式是否可以传递到文本字段？

[[1,2,1],[2,2,1],[3,2,1]]

Answer 1

如果您可以构建HTML以将input组与div元素分开，那么您可以使用map()来创建所需的输出。

另请注意，id属性在页面中必须是唯一的。在您的情况下，您可以使用data*属性来存储给定input元素的标识符。试试这个：

var arr = $('div').map(function() {
  var o = {};
  $(this).find('input').each(function() {
    o[$(this).data('id')] = this.value;
  });
  return o;
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" data-id="id" value="1" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>

更新中的输出格式（[{1,2,1},{2,2,1},{3,2,1}]）是不可能的，因为对象必须具有键和值。相反，你可以使用多维数组。您可以修改以上内容：

var arr = $('div').map(function() {
  return [$(this).find('input').map(function() {
    return this.value;
  }).get()]
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" data-id="id" value="1" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>

Answer 2

这不是一个完整的答案，但应该真的很有帮助

建议使用HTML，根据需要重命名

<!-- row1 -->
<div class"workerRow">
    <input type="text" class="workerRow_id" value="1"/>
    <input type="text" class="workerRow_worker_id" value="2"/>
    <input type="text" class="workerRow_status" value="1"/>
</div>

<!-- row2 -->
<div class"workerRow">
    <input type="text" class="workerRow_id" value="2"/>
    <input type="text" class="workerRow_worker_id" value="2"/>
    <input type="text" class="workerRow_status" value="1"/>
</div>

<!-- row3 -->
<div class"workerRow">
    <input type="text" class="workerRow_id" value="2"/>
    <input type="text" class="workerRow_worker_id" value="2"/>
    <input type="text" class="workerRow_status" value="1"/>
</div>

<input type="submit" value="submit" />

jquery to target ..

$('.workerRow').each(function(elem) {
   var id = elem.find(".workerRow_id").val();
   var worker_id = elem.find(".workerRow_worker_id").val();
   var status = elem.find(".workerRow_status").val();

    //map the values how ever you see fit.
});

将值从输入转换为对象数组

2 个答案: