Question

首先，我点击按钮Add，然后点击“显示”按钮。最后Show Object

问题是当我点击按钮Show Object时，我只得到最后一个输入元素的一个对象，而不是每个输入元素的一个对象。

如何在不丢失大部分内容的情况下从函数内部添加新对象？

以下是代码：

＆＃13;

$(document).ready(function() {
  // body...
  var tableInput = "<tr><td><input type='text'/></td><td><input type='text'/></td></tr>";
  var obj = {};
  const rowNo = 2;

  $("h1").text("Helllo Sonq");
  console.log("function called!");

  $("#add").click(function() {
    $("#table").append(tableInput)
  })

  $("#show").click(function() {
    $(":text").each(function(index) {
      console.log(index + ': ' + $(this).val());
      var rowno = "row" + parseInt(index / rowNo)
      obj[rowno] = new Object()
      obj[rowno]["element" + index.toString()] = $(this).val();
      // obj[rowno]["element" + index.toString()] = $(this).val();
    })
  })

  $("#show-object").click(function() {
    console.log(obj);
  })
})

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/js.js"></script>
  <h1>Hello Riko!</h1>
  <button id="add">Add</button>
  <button id="show">Show</button>
  <button id="show-object">Show Object</button>
  <table id="table">
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </table>
</body>

</html>

＆＃13;

进入功能：

$("#show").click(function(){
    $(":text").each(function(index) {

我想为每个迭代的obj元素向全局input type=text添加一个对象。

Answer 1

由于你定位行然后你应该首先循环遍历它们然后在每个行循环中通过输入就像：

$("tbody>tr").each(function(index) {
  var rowno = "row" + index;
  obj[rowno] = {};

  $(":text", this).each(function(index) {
    console.log(index + ': ' + $(this).val());

    obj[rowno]["element" + index] = $(this).val();
  });
});

注意：我的建议还使用thead/tbody调整了表格。

$(document).ready(function() {
  var tableInput = "<tr><td><input type='text'/></td><td><input type='text'/></td></tr>";
  var obj = {};
  const rowNo = 2;

  $("h1").text("Helllo Sonq");
  console.log("function called!");

  $("#add").click(function() {
    $("#table>tbody").append(tableInput)
  })

  $("#show").click(function() {
    $("tbody>tr").each(function(index) {
      var rowno = "row" + index;
      obj[rowno] = {};

      $(":text", this).each(function(index) {
        console.log(index + ': ' + $(this).val());

        obj[rowno]["element" + index] = $(this).val();
      })
    })
  })

  $("#show-object").click(function() {
    console.log(obj);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Hello Riko!</h1>
<button id="add">Add</button>
<button id="show">Show</button>
<button id="show-object">Show Object</button>
<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 2

第一次执行var rowno = "row" + parseInt(index/rowNo)时，var rowno会填充row0。因为0/2是0.

但是，第二次，同一行var rowno = "row" + parseInt(index/rowNo)给你的值也是0，因为1/2是0.5，所以被截断为0.通过这样做，你正在替换对象位置'row0'，这是javascript中的一个对象。

你不应该使用parseInt

Answer 3

如果它不存在，只需创建obj[rowno] = new Object()：

if (!obj[rowno]) {
  obj[rowno] = new Object()
}

因为它正在重新创建新实例，所以前一个实例已经消失了。

$("#show").click(function() {
  $(":text").each(function(index) {
    console.log(index + ': ' + $(this).val());
    var rowno = "row" + parseInt(index / rowNo)
    if (!obj[rowno]) {
      obj[rowno] = new Object()
    }
    obj[rowno]["element" + index.toString()] = $(this).val();
  })
})

<强> N.B。

当index = 0时，
parseInt（index / 2）返回0 当index = 1时，parseInt（index / 2）返回0

从JavaScript中的函数向对象添加对象

3 个答案: