Question

我有一个表，其中包含输入文本框的动态行。需要将这些动态文本框值保存到对象。

文本框的名称和值如下： first_textbox：名称：name1，name2，name3 .... etc second_texbox：school1，school2，school3 ..等等... third_textbox：branch1，branch2等。

var n = 10;
var myObject = {};

for (i=1; i<n; i++) {
  var saveName = "name"+i;
  var saveSchool = "School"+i;
  var saveBranch = "branch"+i;

  var saveName = document.getElementById("saveName").value;
  var saveSchool = document.getElementById("saveSchool").value;
  var saveBranch = document.getElementById("saveBranch").value;
  myObject { Name: saveName, School: saveSchool, Branch: saveBranch);
}

因此，myObject最后应具有10个名称，10个学校，10个分支。...

有人可以建议我吗？

Answer 1

使用括号符号为对象添加动态属性和值：

myObject { Name: saveName, School: saveSchool, Branch: saveBranch);

成为

var name = 'Name'+i;
var school = 'School'+i;
var branch = 'Branch'+i;
myObject[name] = saveName;
myObject[school] = saveSchool;
myObject[branch] = saveBranch;

也

for (i=1; i<n; i++)

应该是

for (i=1; i<=n; i++)

否则i只会从1变到9，永远不会变10。

Answer 2

在注释中提供以下HTML代码后，您可以执行以下操作

var result = [];

function storeResult() {
  var noOfRows = document.querySelector('tbody').children.length;
  for (var i = 1; i <= noOfRows; i++) {
    result.push({
      name: document.getElementById('name' + i).value,
      school: document.getElementById('school' + i).value,
      branch: document.getElementById('branch' + i).value
    });
  }
  console.log(result);
}

<div>
  <table>
    <tr>
      <td> Name1<input type="text" id="name1"> </td>
      <td> school11<input type="text" id="school1"> </td>
      <td> branch1<input type="text" id="branch1"> </td>
    </tr>
    <tr>
      <td> Name2<input type="text" id="name2"> </td>
      <td> school2<input type="text" id="school2"> </td>
      <td> branch2<input type="text" id="branch2"> </td>
    </tr>
    <tr>
      <td> Name3<input type="text" id="name3"> </td>
      <td> school13<input type="text" id="school3"> </td>
      <td> branch3<input type="text" id="branch3"> </td>
    </tr>
  </table>
</div>

<button onclick="storeResult()">Store Result</button>

更新

正如 AmmoPT 所说，您可以像下面那样在单个对象中收集数据

var singleObj = {};

function storeResult() {
  var noOfRows = document.querySelector('tbody').children.length;
  for (var i = 1; i <= noOfRows; i++) {
    singleObj['name' + i] = document.getElementById('name' + i).value,
    singleObj['school' + i] = document.getElementById('school' + i).value,
    singleObj['branch' + i] = document.getElementById('branch' + i).value
  }
  console.log(singleObj);
}

<div>
  <table>
    <tr>
      <td> Name1<input type="text" id="name1"> </td>
      <td> school11<input type="text" id="school1"> </td>
      <td> branch1<input type="text" id="branch1"> </td>
    </tr>
    <tr>
      <td> Name2<input type="text" id="name2"> </td>
      <td> school2<input type="text" id="school2"> </td>
      <td> branch2<input type="text" id="branch2"> </td>
    </tr>
    <tr>
      <td> Name3<input type="text" id="name3"> </td>
      <td> school13<input type="text" id="school3"> </td>
      <td> branch3<input type="text" id="branch3"> </td>
    </tr>
  </table>
</div>

<button onclick="storeResult()">Store Result</button>

通过JavaScript中的动态表输入文本框创建动态对象

2 个答案: