在 JavaScript 中从动态表输入文本框创建动态对象

debugcn 发表于 Dev

用户3280899

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

文本框名称和值如下： first_textbox : names : name1, name2, name3.... etc second_texbox : school1, school2,school3... etc...third_textbox : branch1, branch2,.... etc

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 应该有 10Names, 10Schools, 10Branches ....

谁能给我一个建议？

西瓦库玛·塔迪塞蒂

使用注释中给出的以下 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。