CODEWITHSUNDEEP
jquery
John Louie Dela Cruz
John Louie Dela Cruz

Reputation: 669

Getting values of each textbox with the same class inside the table row

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

Answers (4)

Sindhoo Oad
Sindhoo Oad

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

J Santosh
J Santosh

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

Amit Soni
Amit Soni

Reputation: 3316

Try

  $(document).ready(function(){
        $('tr').each(function () {
            var timeinhh1 = $(this).children('td').find('.timeinhh1').val();
            alert(timeinhh1);
        });
    });

check here

Upvotes: 1

Sandeep Nayak
Sandeep Nayak

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

Related Questions