asp.net mvc - Loop through html table using jquery -

how can loop through dynamically created table in mvc using jquery excluding header row.

requirement:- have table 2 columns "id" , " name" clicking new can add new rows , type data. when clicking submit need check row contain data typed or not. if filled form submit else alert user fill form.

the problem facing is not reading value typed on texbox of table. tried both .text() , .val()

edited code

      <table id="newservice" style="display:none">         <tr>  <td><input id="start-%" class="datepicker" style="width:75px" type="text" name="provider_service_dtls[#].activity_start_date" value /></td> <td><input id="type-%" style="width:100px" class="act_type" type="text" name="provider_service_dtls[#].activity_type" readonly value /></td> <td><input id="code-%" class="act_code" style="width:150px" type="text" name="provider_service_dtls[#].activity_code"  value /></td>  <td><input id="clinician-%" class="clini" style="width:150px" type="text" name="provider_service_dtls[#].clinician" value /></td>  <td><input id="net-%" class="" style="width:40px" type="text" name="provider_service_dtls[#].net_amt" value /></td>  <td><input id="qty-%" class="" style="width:25px" type="text" name="provider_service_dtls[#].quantity" value /> <input type="hidden" name="provider_service_dtls.index" value="%" />  </td> <td><input id="delete" class="delete" value="x" type="button"></td> </tr> </table> 

jquery adding code

 var index = (new date()).gettime(); var clone = $('#newservice').clone(); clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']')); clone.html($(clone).html().replace(/"%"/g, '"' + index + '"')); clone.html($(clone).html().replace(/"token-input-diag-%"/g, 'token-input-diag-' + index));  clone.html($(clone).html().replace(/"token-input-desc-%"/g, 'token-input-desc-' + index)); clone.html($(clone).html().replace(/"type-%"/g, 'type-' + index)); clone.html($(clone).html().replace(/"code-%"/g, 'code-' + index));                     clone.html($(clone).html().replace(/"start-%"/g, 'start-' + index)); clone.html($(clone).html().replace(/"clinician-%"/g, 'clinician-' + index)); clone.html($(clone).html().replace(/"net-%"/g, 'net-' + index)); clone.html($(clone).html().replace(/"qty-%"/g, 'qty-' + index)); var html = clone.html(); $("#service").append(clone.html()); 

loop read

var table = $("service");   table.find('tr').each(function (i, el) {  var $tds = $(this).find('td'); alert($tds.eq(1).text()); alert($tds.eq(2).text()); alert($tds.eq(3).text()); alert($tds.eq(4).text()); alert($tds.eq(5).text()); } 

in loop load,

you write $("service"). either $("#service") or $(".service")

as want input value, can find $tds.eq(1).find('input').val()

please take @ fiddle: https://jsfiddle.net/fbg0mu45/3/

$("#btnadd").click(function() {      addtable();  });    $("#btnsubmit").click(function() {      var table = $("#dvtable");      table.find('tr').each(function(i, el){      $(this).find('td').each(function(j,elem){          alert($(this).find('input').val());          //alert($(this).html());          });      });      });    var addtable = function () {      var index = (new date()).gettime();      var clone = $('#newservice').clone();      clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));      clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));  clone.html($(clone).html().replace(/"token-input-diag-%"/g, 'token-input-diag-' + index));   clone.html($(clone).html().replace(/"token-input-desc-%"/g, 'token-input-desc-' + index));  clone.html($(clone).html().replace(/"type-%"/g, 'type-' + index));  clone.html($(clone).html().replace(/"code-%"/g, 'code-' + index));                      clone.html($(clone).html().replace(/"start-%"/g, 'start-' + index));  clone.html($(clone).html().replace(/"clinician-%"/g, 'clinician-' + index));  clone.html($(clone).html().replace(/"net-%"/g, 'net-' + index));  clone.html($(clone).html().replace(/"qty-%"/g, 'qty-' + index));  var html = clone.html();      $("#dvtable").append(html);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="newservice" style="display:none">          <tr>   <td><input id="start-%" class="datepicker" style="width:75px" type="text" name="provider_service_dtls[#].activity_start_date" value /></td>  <td><input id="type-%" style="width:100px" class="act_type" type="text" name="provider_service_dtls[#].activity_type" readonly value /></td>  <td><input id="code-%" class="act_code" style="width:150px" type="text" name="provider_service_dtls[#].activity_code"  value /></td>   <td><input id="clinician-%" class="clini" style="width:150px" type="text" name="provider_service_dtls[#].clinician" value /></td>   <td><input id="net-%" class="" style="width:40px" type="text" name="provider_service_dtls[#].net_amt" value /></td>   <td><input id="qty-%" class="" style="width:25px" type="text" name="provider_service_dtls[#].quantity" value />  <input type="hidden" name="provider_service_dtls.index" value="%" />   </td>  <td><input id="delete" class="delete" value="x" type="button"></td> </tr>  </table>            <input type='button' id='btnadd' value='add'/>            <table id='dvtable'>      </table>      <input type='button' id='btnsubmit' value='submit'/>