Adding new rows to table on clicking button in JQuery

Crazy Developer

I am pretty new to jquery. I have the following code. Here I want to get new rows in the table by clicking the add button, but I can't get it.,

can someone tell me what mistake I have done here?

<script type="text/javascript">
var $ = jQuery.noConflict();
$("#addrows").click(function () {
  if (document.getElementById("hiddenprice").value == "") {
    imagecounter = 4;
   } else {
   imagecounter = parseFloat(document.getElementById("hiddenprice").value) +1;
   }
  //imagecounter=4;     
  var newImageDiv = $(document.createElement('div'))
   .attr("id", 'add_div' + imagecounter);
  newImageDiv.after().html('<table width="100%" cellpadding="0" 
  cellspacing="0" class="pdzn_tbl1" border="0">' +
  '<tr><td><input type="text" name="rollno<? $i ?>"/></td>' +
  '<td><input type="text" name="firstname<? $i ?>" /></td>' +
  '<td><input type="text" name="lastname<? $i ?>" /></td></tr></table>');

  newImageDiv.appendTo("#addgroup");
  $("tr:last").after(newImageDiv);
  document.getElementById("hiddenprice").value = imagecounter;
  imagecounter++;
});
</script>
<div class="common" style="width:1040px; -overflow-x:scroll; padding: 5px 5px 0 5px;">
  <table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" >
  <tr>  
    <th>Roll No</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <?php $t_row=3; for($i=1;$i<=$t_row;$i++) {   ?>
  <tr id="rows">
    <div> 
      <td><input type="text" name="rollno<? $i ?>"/></td>
      <td><input type="text" name="firstname<? $i ?>"/></td>
      <td> <input type="text" name="lastname<? $i ?>"/></td>
    </div>
  </tr>
  <? } ?>

  <div id="addgroup"> 
    <div id="add_div1"> </div>
  </div> 
  <table>
    <input type="button" name="add" value="+Add" id="addrows" />
    <input type="hidden" id="hiddenprice" name="hiddenprice" value="3"/> 
  </table>
</div>

Code Formatted & Edit: Code alignments updated and removed unwanted style codes for better readability

Satinder singh

Sample DEMO for Adding new row

$("#addrows").click(function () {
     $("#mytable").each(function () {
         var tds = '<tr>';
         jQuery.each($('tr:last td', this), function () {
             tds += '<td>' + $(this).html() + '</td>';
         });
         tds += '</tr>';
         if ($('tbody', this).length > 0) {
             $('tbody', this).append(tds);
         } else {
             $(this).append(tds);
         }
     });
});

Updated: Here div close at wrong place, it should end before tr close, may be thats the error

<tr id="rows">
<div style="padding-left: 5px"> 
<td style="padding:5px;" > <input type="text" name="rollno<? $i ?>"  /> </td>
<td style="padding:5px;"> <input type="text" name="firstname<? $i ?>" /> </td>
<td style="padding:5px;"> <input type="text" name="lastname<? $i ?>" /> </td>
</div> // right
</tr>
</div> // wrong

UPDATED DEMO 2

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Adding new <select> tag by clicking on the button

From Dev

How to refresh a simple Datatables table when adding new rows with jQuery

From Dev

Adding Table Rows on Button Click

From Dev

Adding rows to table using jquery

From Dev

Adding rows to table using jquery

From Dev

Adding Styles on first 5 elements after clicking button using Jquery

From Dev

Adding Styles on first 5 elements after clicking button using Jquery

From Dev

How to delete rows from table when clicking button

From Dev

How to make a show a table on clicking a button defined in <button> using jquery

From Dev

jQuery, adding multiple table rows is not working correctly

From Dev

Adding or deleting table rows with MySQL, jQuery and Ajax

From Dev

Adding table rows and column dynamically with jQuery

From Dev

Creating a new table in phpMyAdmin but clicking a submit button in HTML

From Dev

how to add new select box after clicking a button in jquery

From Dev

Adding new row to the table using javascript / jquery

From Dev

JQuery Adding new Row in Table based on Selection

From Dev

Show table by clicking a button

From Dev

JQuery clear HTML table and insert new rows

From Dev

adding <tr> to table using jquery + keep jquery function on added rows

From Dev

How to retain the dropdown selection after adding new rows or columns to a table

From Dev

New in reactJS, i am trying to adding an item in array by clicking on button . but could not fetch changed array

From Dev

Adding a new table to Xml Dataset by the click of a button in VB .Net

From Dev

Adding new rows in sql

From Dev

Clicking a Button and Opening a new Activity

From Dev

Opening a new JFrame by clicking a button

From Dev

Rows disappearing when adding them dynamically to table with JS/jQuery

From Dev

Calculate automatically in a table using jquery when adding or deleting rows

From Dev

Clicking a button within an IE table

From Dev

Changing the bindings of a Table by clicking on a button

Related Related

  1. 1

    Adding new <select> tag by clicking on the button

  2. 2

    How to refresh a simple Datatables table when adding new rows with jQuery

  3. 3

    Adding Table Rows on Button Click

  4. 4

    Adding rows to table using jquery

  5. 5

    Adding rows to table using jquery

  6. 6

    Adding Styles on first 5 elements after clicking button using Jquery

  7. 7

    Adding Styles on first 5 elements after clicking button using Jquery

  8. 8

    How to delete rows from table when clicking button

  9. 9

    How to make a show a table on clicking a button defined in <button> using jquery

  10. 10

    jQuery, adding multiple table rows is not working correctly

  11. 11

    Adding or deleting table rows with MySQL, jQuery and Ajax

  12. 12

    Adding table rows and column dynamically with jQuery

  13. 13

    Creating a new table in phpMyAdmin but clicking a submit button in HTML

  14. 14

    how to add new select box after clicking a button in jquery

  15. 15

    Adding new row to the table using javascript / jquery

  16. 16

    JQuery Adding new Row in Table based on Selection

  17. 17

    Show table by clicking a button

  18. 18

    JQuery clear HTML table and insert new rows

  19. 19

    adding <tr> to table using jquery + keep jquery function on added rows

  20. 20

    How to retain the dropdown selection after adding new rows or columns to a table

  21. 21

    New in reactJS, i am trying to adding an item in array by clicking on button . but could not fetch changed array

  22. 22

    Adding a new table to Xml Dataset by the click of a button in VB .Net

  23. 23

    Adding new rows in sql

  24. 24

    Clicking a Button and Opening a new Activity

  25. 25

    Opening a new JFrame by clicking a button

  26. 26

    Rows disappearing when adding them dynamically to table with JS/jQuery

  27. 27

    Calculate automatically in a table using jquery when adding or deleting rows

  28. 28

    Clicking a button within an IE table

  29. 29

    Changing the bindings of a Table by clicking on a button

HotTag

Archive