Issue
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.
Solution
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 By - Rohan Kumar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.