CODEWITHSUNDEEP
javascriptjqueryhtmlcssfrontend
RS_ingo
RS_ingo

Reputation: 429

Reading data from tr with an id inside the tbody

I am trying to read data from input field inside "td" with an id inside the "tbody"

The html structure is like this:

    <tbody id="tbody1">
   <tr>
      <td>
         <input type="text" id="bacthNo" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="location" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="qty" class="form-control md-has-value" required="">
      </td>      
   </tr>
   <tr>
      <td>
      <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
          <input type="text" id="location" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
      <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
      </td>
   </tr>  
</tbody>
<tbody id="tbody2">
   <tr>
      <td>
         <input type="text" id="bacthNo" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="location" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="qty" class="form-control md-has-value" required="">
      </td>      
   </tr>
   <tr>
      <td>
      <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
          <input type="text" id="location" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
      <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
      </td>
   </tr>  
</tbody>

Here the "tbody" id is changing dynamically and tr can be in between 1 to 10 for each "tbody".

What i want is to read all the data of "bacthNo","location" and "qty" for each tbody and push into an array on form submit. I had tried several approach but not able to fetch data from this complicated form.

Kindly Help.

Upvotes: 2

Views: 2225

Answers (3)

Michele Dibenedetto
Michele Dibenedetto

Reputation: 575

something like this:

       document.addEventListener("DOMContentLoaded", function (event) {
            var _rows = document.querySelectorAll('table tr');                
        //depending on your markup you could use also: 
        // var _rows = document.querySelectorAll('tr');
        // var _rows = document.querySelectorAll('tbody tr');
       //or THE WORST CASE if you cannot really change your html:
       //document.querySelectorAll('tbody[id*="tbody"] tr');
            _rows.forEach(function (row) {
                var _bacthNo = row.querySelector('#bacthNo');
                var _location  = row.querySelector('#location');
                var _qty  = row.querySelector('#qty');

                console.log(_bacthNo.value)
                console.log(_location.value)
                console.log(_qty.value)
            });
        });
 <table>

        <tbody id="tbody1">
            <tr>
                <td>
                    <input type="text" id="bacthNo" class="form-control md-has-value" required="">
                </td>
                <td>
                    <input type="text" id="location" class="form-control md-has-value" required="">
                </td>
                <td>
                    <input type="text" id="qty" class="form-control md-has-value" required="">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
                </td>
                <td>
                    <input type="text" id="location" class="form-control md-has-value" required="" value="0">
                </td>
                <td>
                    <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
                </td>
            </tr>
        </tbody>
        <tbody id="tbody2">
            <tr>
                <td>
                    <input type="text" id="bacthNo" class="form-control md-has-value" required="">
                </td>
                <td>
                    <input type="text" id="location" class="form-control md-has-value" required="">
                </td>
                <td>
                    <input type="text" id="qty" class="form-control md-has-value" required="">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
                </td>
                <td>
                    <input type="text" id="location" class="form-control md-has-value" required="" value="0">
                </td>
                <td>
                    <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
                </td>
            </tr>
        </tbody>

    </table>

Upvotes: 0

seravee
seravee

Reputation: 434

$('#tblOne > tbody  > tr').each(function() {
alert($(this).find("td:first>input").val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblOne">
<tbody id="tbody1">
   <tr>
      <td>
         <input type="text" id="bacthNo" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="location" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="qty" class="form-control md-has-value" required="">
      </td>      
   </tr>
   <tr>
      <td>
      <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
          <input type="text" id="location" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
      <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
      </td>
   </tr>  
</tbody>
<tbody id="tbody2">
   <tr>
      <td>
         <input type="text" id="bacthNo" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="location" class="form-control md-has-value" required="">
      </td>
      <td>
         <input type="text" id="qty" class="form-control md-has-value" required="">
      </td>      
   </tr>
   <tr>
      <td>
      <input type="text" id="bacthNo" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
          <input type="text" id="location" class="form-control md-has-value" required="" value="0">
      </td>
      <td>
      <input type="text" id="qty" class="form-control md-has-value" required="" value="0">
      </td>
   </tr>  
</tbody>
</table>

Upvotes: 0

Saurabh Solanki
Saurabh Solanki

Reputation: 2204

apply class to all of your fields and then access using each function of jquery like this 

  <tr>
  <td>
     <input type="text" id="bacthNo" class="bacthNo form-control md-has-value" required="">
  </td>
  <td>
     <input type="text" id="location" class="location form-control md-has-value" required="">
  </td>
  <td>
     <input type="text" id="qty" class="qty form-control md-has-value" required="">
  </td>      


 $('#tbody1').find('tr').each(function () {
             var eachtr = $(this);
            eachtr.find('.bacthNo').val();
            eachtr.find('.location').val();
            eachtr.find('.qty').val();
           //get your all fields
}

for example see this jsfiddle

Upvotes: 2

Related Questions