使用jQuery选择表列中的每个输入字段

Question

I want to select the input fields' values in each column.

<table id="tablo">
     <tr>
         <td><input class="Name" type="text" /></td>
         <td><input class="Age" type="text" /></td>
         <td><input class="No" type="text" /></td>
     </tr>
     <tr>
         <td><input class="Name" type="text" /></td>
         <td><input class="Age" type="text" /></td>
         <td><input class="No" type="text" /></td>
     </tr>
     <tr>
         <td><input class="Name" type="text" /></td>
         <td><input class="Age" type="text" /></td>
         <td><input class="No" type="text" /></td>
     </tr>
     ...
</table>

Then selecting each input value, I will create an object with these values and push the object in an array by looping through the selected inputs:

var arr= []
var obj = {
    Name: jquery selector will come here,
    Age: jquery selector will come here,
    No: jquery selector will come here
}
arr.push(obj);

I've tried with jQuery's $.each() function, but I just only reach the columns.

Answer 1

Id must be unique, so try it with using class like,

var objs=[];
$('#tablo tr').each(function(){
  var inputs = $(this).find('input'),o={};
  inputs.each(function(){
     o[$(this).attr('class')]=this.value;
  });
  objs.push(o);
});

Snippet,

 var objs = []; $('#tablo tr').each(function() { var inputs = $(this).find('input'), o = {}; inputs.each(function() { o[$(this).attr('class')] = this.value; }); objs.push(o); }); console.log(objs); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tablo"> <tr> <td><input class="Name" type="text" value="test1"/></td> <td><input class="Age" type="text" value="123"/></td> <td><input class="No" type="text" value="no1" /></td> </tr> <tr> <td><input class="Name" type="text" /></td> <td><input class="Age" type="text" /></td> <td><input class="No" type="text" /></td> </tr> <tr> <td><input class="Name" type="text" /></td> <td><input class="Age" type="text" /></td> <td><input class="No" type="text" /></td> </tr> </table> 

Answer 2

Try this: you can iterate earch row first and then read each input. Note: id must be unique throughout the DOM, hence replaced with classes

 $(function(){ var array = []; $('#tablo tr').each(function(){ var obj = {}; //obj['name']=$(this).find('td input:eq(0)').val(); //obj['age']=$(this).find('td input:eq(1)').val(); //obj['no']=$(this).find('td input:eq(2)').val(); //for dynamic build of object $(this).find('input').each(function(){ obj[$(this).attr('class')]=$(this).val(); }); array.push(obj); }); console.log(array); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tablo"> <tr> <td><input class="Name" type="text" value="name1"/></td> <td><input class="Age" type="text" value="name1"/></td> <td><input class="No" type="text" value="name1"/></td> </tr> <tr> <td><input class="Name" type="text" value="name2"/></td> <td><input class="Age" type="text" value="age2"/></td> <td><input class="No" type="text" value="no2"/></td> </tr> <tr> <td><input class="Name" type="text" value="name3"/></td> <td><input class="Age" type="text" value="age3"/></td> <td><input class="No" type="text" value="no3"/></td> </tr> ... </table> 

Answer 3

First replace input id's with classes of the same name. Then loop over rows like this:

var arr = [];
$('#table tr').each(function(tr, index) {
  var name = $(tr).find('.Name').val()
  var age = $(tr).find('.Age').val()
  var no = $(tr).find('.No').val()
  arr.push({name:name, age:age, no:no});
})

Answer 4

You should fix the issue with the ids before (ids should be unique in the document) then with jquery will be as easy as:

const inputs = $('#tablo').find('input');

You even don't need jquery

const inputs = document.querySelectorAll('#tablo input');