通過JavaScript中的動態表輸入文本框創建動態對象

Question

我有一個表，其中包含輸入文本框的動態行。 需要將這些動態文本框值保存到一個對象。

文本框的名稱和值如下：first_textbox：名稱：name1，name2，name3等等。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應該有10Names，10Schools，10Branches ....

有人可以建議我嗎？

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>