Selecting each input fields in the table column with 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.

Identifiers in HTML must be unique, Your HTML is invalid. First correct it — Satpal
– Satpal, Commented Jun 19, 2017 at 12:58

Rohan Kumar · Accepted Answer · 2017-06-19 13:05:02Z

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

answered Jun 19, 2017 at 13:05

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Orhun Over a year ago

How can I check the null input values?

Orhun Over a year ago

I've edited the code you sent to check the input values, but didn't work. var objs = []; $('#tablo tr').each(function() { var inputs = $(this).find('input'), o = {}; inputs.each(function() { o[$(this).attr('class')] = this.value; }); if(o['Name'] =! undefined && o['Yas'] =! undefined && o['No'] =! undefined) { ogrenciler.push(o); } objs.push(o); });

Rohan Kumar Over a year ago

Use != instead of =! and o['Age'] in place of o['Yas']

Orhun Over a year ago

I've fixed it like this, but didn't work again. It pushed the first row's input values but didn't push the others row's input values which either isn't undefined or undefined.

Rohan Kumar Over a year ago

Try to use if(o['Name'] && o['Age'] && o['No']) condition

Bhushan Kawadkar · Accepted Answer · 2017-06-19 13:04:32Z

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>

dVeza · Accepted Answer · 2017-06-19 13:06:47Z

0

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

answered Jun 19, 2017 at 13:06

dVeza

5524 silver badges12 bronze badges

Comments

Raulucco · Accepted Answer · 2017-06-19 13:08:15Z

0

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

answered Jun 19, 2017 at 13:08

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Comments

Carlos · Accepted Answer · 2022-10-19 17:02:01Z

0

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

answered Oct 19, 2022 at 17:02

Carlos

7181 gold badge8 silver badges14 bronze badges

Collectives™ on Stack Overflow

Selecting each input fields in the table column with jQuery

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related