Adding new rows to table on clicking button in JQuery

Question

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

Could you please create a [jsfiddle](http://jsfiddle.net) which demonstrates the problem? — z--, Sep 30 '13 at 11:22
Do you want to append table to div on addrows button click ? — Ajinder Singh, Sep 30 '13 at 12:40

Satinder singh · Accepted Answer · 2013-09-30T12:59:39.753

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

As I click in a cell in demo 2 an additional row is added. So I cannot enter data without having a new row added for every cell I click. — z--, Sep 30 '13 at 12:46

score 6 · Answer 2 · edited Jun 20 '20 at 09:12

6

Have a look at Add table row in jQuery

which gives the solution

$('#maintable tr:last').after('<tr><td>...</td><td>...</td><td>...</td><td>...</td></tr>');

As explained here a solution with after is to be preferred over append.

Notes

Do not mix accessing DOM elements with jquery with the approach with getElementById.
As you are using jQuery there is no need to do your own AJAX function.

Demo code

http://jsfiddle.net/A5dT6/1/

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 30 '13 at 11:23

z--

2,186
17
33

You need to work on the whole setup. Do a simplified version first and then add the other features. – z-- Sep 30 '13 at 11:51

score 3 · Answer 3 · answered Sep 30 '13 at 12:33

3

try something like this,FIDDLE

    $(function () {
        $("#addRows").click(function () {
            $("#maintable").append("<tr> <td> New Row</td> </tr>")
        });
    })

answered Sep 30 '13 at 12:33

rajesh kakawat

10,826
1
21
40

Hien Nguyen · Answer 4 · 2019-05-13T14:31:55.093

I contribute another solution with a sample append tr to table use .after() method and string interpolation for updating row index.

let rowIndex = 0;

$("#addrows").click(function () {

  $('#maintable tr:last').after(`<tr><td><input type="text" name="rollno${rowIndex++}"/></td>
      <td><input type="text" name="firstname${rowIndex++}"/></td>
      <td> <input type="text" name="lastname${rowIndex++}"/></td></tr>`);
});

let rowIndex = 0;
  
$("#addrows").click(function () {
  
  $('#maintable tr:last').after(`<tr><td><input type="text" name="rollno${rowIndex++}"/></td>
      <td><input type="text" name="firstname${rowIndex++}"/></td>
      <td> <input type="text" name="lastname${rowIndex++}"/></td></tr>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
 
  <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>

Ajinder Singh · Answer 5 · 2013-09-30T12:40:59.497

1

try the Below Code

 $("#addrows").click(function(){  $("#maintable").append("<tr> <td> Data Here</td> </tr>") });

edited Sep 30 '13 at 12:40

answered Sep 30 '13 at 11:21

Ajinder Singh

532
2
8

score 0 · Answer 6 · answered Sep 30 '13 at 11:20

0

You can use

$('#maintable tr:last').after('<tr><td style="padding:5px;"> Add_Content_Here </td></tr>');

answered Sep 30 '13 at 11:20

Ajinkya

22,324
33
110
161

Iren Patel · Answer 7 · 2013-09-30T12:23:35.773

Try this code add new row dynamically in table using jquery.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
   <script type="text/javascript" language="javascript">

   var indexValue = 0;
   function addRow(){
        var test ='<tr><td>a</td></tr>';
        $("#applyTable").append(test);
        }
      </script>
</head>
<div>
<table class="myTable" border="1px" align="center" style="width:100px;"  >
        <tbody id="applyTable"> 
        </tbody>
</table>
</div>
<div > 
<input type="button" value="Add" border="1px" onclick="addRow()" /><br/><br/>
</div>
<body>
</body>
</html>

Sorry id and mainHead not need but applyTable is call function to table id and add new row. — Iren Patel, Sep 30 '13 at 11:56

score 0 · Answer 8 · answered Sep 30 '13 at 12:23

0

I think the problem is as you havent added the jQuery code to the file, I just see the following two script blocks:

<script src="resources/scripts/jquery.ui.effect.js"></script>
<script src="resources/scripts/jquery.ui.effect-explode.js"></script>

and they don't seem to be having raw jQuery.

Try adding the following line too.

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

answered Sep 30 '13 at 12:23

defau1t

10,593
2
35
47

i added this too but cant find result. think ter is other problem it seems,. – Crazy Developer Sep 30 '13 at 12:26

Adding new rows to table on clicking button in JQuery

8 Answers8

Notes

Demo code

Linked