Question

I have a problem retrieving all the data inside the rows added by the user. I tried using my variable reclist to retrieve the records but it give me blanks.

The source code is as follows:

<script type="text/javascript">
$(document).ready(function(){
   $('#btnAdd').live('click',function(){
      var name = $('#txtName').val();
      var name2 = $('#txtName2').val();
      $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
  });

   $('#tbNames td img.delete').live('click',function(){
        $(this).parent().parent().remove(); 
   });
 });
</script>

<input id="txtName" type="text" />
<input id="txtName2" type="text" />
<input id="btnAdd" type="button" value="Add" />
   <table id="tbNames" >
      <tr>
         <td><b>Name</b></td>
         <td><b>Name2</b></td>
         <td><b>Delete</b></td>
      </tr>
      <tr>
          <td>Bingo</td>
          <td>Tingo</td>
          <td><img src="Delete.gif" height="15" class="delete" /></td>
      </tr>
   </table>

<script type="text/javascript">
$(document).ready(function() {
    $("#submit_app").button();
    $("#submit_app").click(function() {
    var reclist = $("#txtName").val();
    console.log(reclist);
    });
});
</script>

<input id="submit_app" type="button" style="height: 35px; width: 225px" value="Add New User" />

Please advise if I have miss any coding.

Answer 1

Try following code. Check this demo on jsFiddle.net. This will give you all the values inside td of your table.

$(document).ready(function() {
  $('#btnAdd').live('click', function() {
    var name = $('#txtName').val();
    var name2 = $('#txtName2').val();
    $("#tbNames tr:last").after("<tr><td>" + name + "</td><td>" + name2 + "</td><td><img src='delete.gif' class='delete' height='15' /></td></tr>");
  });

  $('#tbNames td img.delete').live('click', function() {
    $(this).parent().parent().remove();
  });

  //$("#submit_app").button(); //Commented this line
  $("#submit_app").click(function() {
      var skipFirstRow = 0; //Skip first row
      $("#tbNames tr").each(function() {
          if (skipFirstRow++ == 0) return;
          var skipLastColumn = 0;
          $(this).children("td").each(function() {
              if (skipLastColumn++ == 2) return;
              alert($(this).html());
          });
     });
     var reclist = $("#txtName").val();
     console.log(reclist);
  });
});

EDIT

Check this fiddle. In this you will get the values in two arrays.