使用jquery循环遍历表列以推送到Google App脚本

Question

I'm really stuck at creating a loop to get the 1st column data of a table with jquery. The table has the following structure:

<table id="table">
<tbody id="tbody">
  <tr id="tr1">
   <td id="td1_1"><input id="td1_1_number" type="number" /></td>
   <td id="td1_2"><input id="td1_2_number" type="number" /></td>
   <td id="td1_3"><input id="td1_3_number" type="number" /></td>
   <td id="td1_4"><input id="td1_4_number" type="number" /></td>
  </tr>
  <tr id="tr2">
   <td id="td2_1"><input id="td2_1_number" type="number" /></td>
   <td id="td2_2"><input id="td2_2_number" type="number" /></td>
   <td id="td2_3"><input id="td2_3_number" type="number" /></td>
   <td id="td2_4"><input id="td2_4_number" type="number" /></td>
  </tr>
 </tbody>
</table> 

At the moment I'm reading each of them individually but there are a lot of td elements in the table. The code I'm using atm is the following:

var data ={
td1_1_number:  $("#td1_1_number").val(),
td1_2_number:  $("#td1_2_number").val(),
td1_3_number:  $("#td1_3_number").val(),
td1_4_number:  $("#td1_4_number").val(),
td2_1_number:  $("#td2_1_number").val(),
td2_2_number:  $("#td2_2_number").val(),
td2_3_number:  $("#td2_3_number").val(),
td2_4_number:  $("#td2_4_number").val()    
}

I tried to use each method but got stuck because I need this array structure to be intact for pushing the data with GAS.

The data I'm appending in gs:

 sheet.appendRow([data.td1_1_number, data.td1_2_number, data.td1_3_number, data.td1_4_number, data.td2_1_number, data.td2_2_number, data.td2_3_number, data.td2_4_number])

I really would like to change to a loop approach since mine is not very elegant.

Answer 1

Here is an example of using the reduce method to create the object from all the inputs.

  //get an array of all the input elements and reduce them to a single object var result = $('#tbody td input').get().reduce(function(data, checkbox){ data[ checkbox.id ] = checkbox.value; //return our modified data reduction return data; }, {}); //show the result console.log(result); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="table"> <tbody id="tbody"> <tr id="tr1"> <td id="td1_1"><input id="td1_1_number" type="number" value="1" /></td> <td id="td1_2"><input id="td1_2_number" type="number" value="2" /></td> <td id="td1_3"><input id="td1_3_number" type="number" value="3" /></td> <td id="td1_4"><input id="td1_4_number" type="number" value="4" /></td> </tr> <tr id="tr2"> <td id="td2_1"><input id="td2_1_number" type="number" value="99" /></td> <td id="td2_2"><input id="td2_2_number" type="number" value="98" /></td> <td id="td2_3"><input id="td2_3_number" type="number" value="97" /></td> <td id="td2_4"><input id="td2_4_number" type="number" value="96" /></td> </tr> </tbody> </table>