Adding new row to table is not working using jquery

Question

I am trying to add/remove new table row <tr> which holds some form elements, on click using jquery. I have tried to develop the jquery code using some tutorials but my code is not working. I cannot add or remove any row.

Though I have provided the code below if you still want to see the code on jsfiddle, please check this link : demo

Could you please tell me where I am doing wrong? Thanks :)

HTML

 <h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
  <table class="dynatable">
        <thead>
            <tr>
                <th>Type</th>
                <th>Account Name</th>
                <th>Debit</th>
                <th>Credit</th>

            </tr>
        </thead>

     <tbody id="p_scents">

         <tr>
        <td><select name="type" id="type">
              <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
              </select> 
             </td>

             <td><select name="accounts" id="accounts">
    <option value="">SELECT</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
       </select> </td>

      <td><input type="text" name="debit_amount" id="debit_amount" /> </td>
      <td><input type="text" name="credit_amount" id="credit_amount"/></td>

      </tr>
    </tbody>
  </table>

Jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script>
  $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents tr').size() + 1;

    $('#addScnt').live('click', function() {
        ('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);

            i++;
            return false;
     });

      //Remove button
         $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('<tr>').remove();
                    i--;
            }
            return false;
          });
       });
   </script>

scumah · Accepted Answer · 2012-07-13 10:11:23Z

4

Here's a working example, including remove row functionality: DEMO.

And this is the resulting JS:

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});

First, your HTML had a couple of syntactical problems (solved in the fiddle). You where using the .append(), function wrong, and the selector in your last function ('$(this).parents('').remove();') needed to be just 'tr'.

And nothing much :P

edited Jul 13, 2012 at 10:11

answered Jul 13, 2012 at 8:39

scumah

6,4132 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

black_belt Over a year ago

should I use .live event or .on ? According to Tats_innit .on event as .live is deprecated from the latest version of Jquery

scumah Over a year ago

@black_belt Oops, my fault, you should definitely be using .on(). I updated the answer :D

scumah Over a year ago

@black_belt, I'm sorry, but I don't get what you meen with 'for add but' :/ What do you want me to add?

black_belt Over a year ago

I am sorry, there was a typing mistake.. What I was trying to say is please replace .live event with .on in $('#addScnt').live('click', function() { in your code above. THanks

scumah Over a year ago

Damn, I just replaced it in the last call xD Thanks for pointing that out, sorry I didn't realize it :P

|

halfer · Accepted Answer · 2025-03-25 19:21:35Z

3

Here's a working demo: http://jsfiddle.net/9S2Sc/ and a full working version: http://jsfiddle.net/UBxTf/

There are quite a few things that needed attention. Also, please use .on event as .live is deprecated from the latest version of jQuery.

Please see the rest of the code below.

$(function() {

    var scntDiv = $('#p_scents');

    var i = $('#p_scents tr').size() + 1;

    $('#addScnt').on('click', function() {
 
        $('<tr><td> <select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select> </td><td> <select name="accounts" id="accounts"> <option value="">SELECT</option> <option value="One">One</option><option value="Two">Two</option> </select>  </td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);
        
        i++;
        return false;

    });
});
        
//Remove button
    $('#remScnt ').on('click ', function() { 
    if( i > 2 ) {
        $(this).parents(' < tr > ').remove();
            i--;
    }
    return false;
});

edited Mar 25 at 19:21

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Jul 13, 2012 at 8:20

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

3 Comments

Mr. Mr. Over a year ago

-1: The remove function does not work. +1 to reflect your update.

Tats_innit Over a year ago

@black_belt sure here you go full working version :) jsfiddle.net/UBxTf glad I can help

Tats_innit Over a year ago

@Monkieboy please see here: jsfiddle.net/UBxTf lol tell me man -1 is not constructive :)

Franquis · Accepted Answer · 2012-07-13 08:22:19Z

The jQuery.append() function should be used like this:

$('#addScnt').live('click', function() {
scntDiv.append('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>');

            i++;
            return false;
     });

Reporter · Accepted Answer · 2012-07-13 08:30:34Z

0

Another error exists in the function to remove the rows. It must be

$(this).parents(' tr ').remove();

without < and >

A tip: the browsers Firefox, Chrom and Safari provide an error console for Javascript. So you can see error messages.

answered Jul 13, 2012 at 8:30

Reporter

3,9345 gold badges36 silver badges50 bronze badges

1 Comment

Reporter Over a year ago

By the way I found another mistake of yours. You added form fields with same name and id. Ageneral rule is that id must! be unique within the page. You can avoid it, if you add just a counter to that attribute.

Collectives™ on Stack Overflow

Adding new row to table is not working using jquery

4 Answers 4

6 Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related