Reputation: 669
How to get each value of textbox with the class timeinhh1
inside the table row?
I'm using this code:
function ValidateOnLoad() {
$('tr').each(function () {
var timeinhh1 = $(this).children('.timeinhh1').val();
alert(timeinhh1);
});
}
<table>
<tr>
// th here
</tr>
<tr>
<td><input type="text" class="timeinhh1" value="9"></td>
<td><input type="text" class="timeinhh2" value="12"></td>
</tr>
<tr>
<td><input type="text" class="timeinhh1" value="13"></td>
<td><input type="text" class="timeinhh2" value="14"></td>
</tr>
</table>
But it's not working, how to do it correctly? Thanks in advance.
Upvotes: 0
Views: 2235
Reputation: 1194
Your code is working fine with little issue that it is not finding .timeinhh1 class on first tr
thats why it is returning undefined
, rather than applying each on all tr, apply filter of class which you want i.e timeinhh1
.
$(document).ready(function () {
$('tr').find('.timeinhh1').each(function () {
var timeinhh1 = $(this).val();
alert(timeinhh1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table>
<tr>
// th here
</tr>
<tr>
<td><input type="text" class="timeinhh1" value="9"></td>
<td><input type="text" class="timeinhh2" value="12"></td>
</tr>
<tr>
<td><input type="text" class="timeinhh1" value="13"></td>
<td><input type="text" class="timeinhh2" value="14"></td>
</tr>
</table>
Upvotes: 0
Reputation: 3847
The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.
your structure is tr>td>.timeinhh1
so this.children
gives you td
not .timeinhh1
. And children()
gives you only immediate children of particular element. Docs
try this
$('tr').each(function() {
var timeinhh1 = $(this).children('td').children('.timeinhh1 ').val();// using children find td and then timeinhh1
var x = $(this).find('.timeinhh1 ').val();// you can do the same using find
console.log('using chidren - ' + timeinhh1);
console.log('using find - ' + x)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>// th here</tr>
<tr>
<td>
<input type="text" class="timeinhh1" value="9" />
</td>
<td>
<input type="text" class="timeinhh2" value="12" />
</td>
</tr>
<tr>
<td>
<input type="text" class="timeinhh1" value="13" />
</td>
<td>
<input type="text" class="timeinhh2" value="14" />
</td>
</tr>
</table>
Upvotes: 1
Reputation: 3316
Try
$(document).ready(function(){
$('tr').each(function () {
var timeinhh1 = $(this).children('td').find('.timeinhh1').val();
alert(timeinhh1);
});
});
check here
Upvotes: 1
Reputation: 4757
$(document).ready(function() {
ValidateOnLoad();
function ValidateOnLoad() {
$('tr').each(function() {
$(this).find('td').each(function() {
console.log("td");
alert($(this).find(".timeinhh1").val());
});
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
</tr>
<tr>
<td>
<input type="text" class="timeinhh1" value="9">
</td>
<td>
<input type="text" class="timeinhh1" value="13">
</td>
</tr>
</table>
Upvotes: 1