Question

我有一个动态表单，您可以在其中单击一个按钮，然后在表单中添加新的表单行。表单条目如下所示：

<input type='text' class='custom' data-index='".$f."' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='".$f."' name='column_value_two' value='2'>

例如，我在上面添加了3行，并且data-index是0到3。我尝试通过执行以下操作来处理它：

var data = [];
$(".custom").each(function() {
    var index = parseInt($(this).attr('data-index'));
    data[index][$(this).attr("name")] = $(this).val();
});

我试图得出以下最终结果：

data[0]['column_value_one'] = 1;
data[0]['column_value_two'] = 2;
data[1]['column_value_one'] = 1;
data[1]['column_value_two'] = 2;

我通常只写PHP，因此我按照上面的方法布置数组。但这将是一个Javascript / Jquery数组而不是PHP。

在此，我将不胜感激。

Answer 1

如果索引不存在，则需要将data[index]初始化为{}。

data[index] = data[index] || {};

赞：

var data = [];
$(".custom").each(function() {
  var index = parseInt($(this).attr('data-index'));
  data[index] = data[index] || {}; 
  data[index][$(this).attr("name")] = $(this).val();
});

console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='custom' data-index='0' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='0' name='column_value_two' value='2'>
<input type='text' class='custom' data-index='1' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='1' name='column_value_two' value='2'>
<input type='text' class='custom' data-index='2' name='column_value_one' value='1'>
<input type='text' class='custom' data-index='2' name='column_value_two' value='2'>

Answer 2

听起来您想要一个对象数组：

data = [
    {column_value_one: 1, column_value_two: 2},
    // ...
];

在这种情况下，由于第二个输入紧随第一个输入，因此您可以执行以下操作：

var data = $("input[name=column_value_one]").map(function() {
    return {column_value_one: this.value, column_value_two: $(this).next().val()};
}).get();

实时示例：

var data = $("input[name=column_value_one]").map(function() {
    return {column_value_one: this.value, column_value_two: $(this).next().val()};
}).get();

console.log(data);

<input type='text' class='custom' data-index='0' name='column_value_one' value='11'>
<input type='text' class='custom' data-index='0' name='column_value_two' value='12'>
<input type='text' class='custom' data-index='1' name='column_value_one' value='21'>
<input type='text' class='custom' data-index='1' name='column_value_two' value='22'>
<input type='text' class='custom' data-index='2' name='column_value_one' value='31'>
<input type='text' class='custom' data-index='2' name='column_value_two' value='32'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或者如果它们之间可能有东西，请使用两个jQuery对象：

var ones = $("input[name=column_value_one]");
var twos = $("input[name=column_value_two]");
var data = ones.map(function(index) {
    return {column_value_one: this.value, column_value_two: twos.eq(index).val()};
}).get();

var ones = $("input[name=column_value_one]");
var twos = $("input[name=column_value_two]");
var data = ones.map(function(index) {
    return {column_value_one: this.value, column_value_two: twos.eq(index).val()};
}).get();

console.log(data);

<input type='text' class='custom' data-index='0' name='column_value_one' value='11'>
<input type='text' class='custom' data-index='0' name='column_value_two' value='12'>
<input type='text' class='custom' data-index='1' name='column_value_one' value='21'>
<input type='text' class='custom' data-index='1' name='column_value_two' value='22'>
<input type='text' class='custom' data-index='2' name='column_value_one' value='31'>
<input type='text' class='custom' data-index='2' name='column_value_two' value='32'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在两种情况下，都不需要data-index（为此；也许您还需要其他东西）。

如何构造JavaScript数组

2 个答案: