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 e here,
    Age: jquery selector will e here,
    No: jquery selector will e here
}
arr.push(obj);

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

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 e here,
    Age: jquery selector will e here,
    No: jquery selector will e here
}
arr.push(obj);

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

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 19, 2017 at 13:14 Orhun asked Jun 19, 2017 at 12:57 OrhunOrhun 1,25211 gold badge1616 silver badges2323 bronze badges 3

• 7 Identifiers in HTML must be unique, Your HTML is invalid. First correct it – Satpal Commented Jun 19, 2017 at 12:58
• So loop over and build the objects. – epascarello Commented Jun 19, 2017 at 13:04
• A simple fiddle – gaetanoM Commented Jun 19, 2017 at 13:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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./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>

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./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>

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});
})

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');

Using dots in find for read ALL imputs, Like if work for u

$('#bodyt tr').each(function(){
            var inputs = $(this).find(':input'), row={};
            inputs.each(function(){
              row[$(this).attr('idm')]  = this.value;
            });
            ob.solicitud.push(row);
          });