CODEWITHSUNDEEP
jqueryjquery-selectors
black_belt
black_belt

Reputation: 6799

Adding new row to table is not working using jquery

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>​​

Upvotes: 1

Views: 7624

Answers (4)

scumah
scumah

Reputation: 6373

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

Upvotes: 4

Tats_innit
Tats_innit

Reputation: 34107

Hiya working demo :) http://jsfiddle.net/9S2Sc/ full working version http://jsfiddle.net/UBxTf/

there are quite a few thing needed attention: also please use .on event as .live is deprecated from the latest version of Jquery,

please see rest of the code below.

hope this help the cause

code

$(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;
              });
         ​

Upvotes: 3

Reporter
Reporter

Reputation: 3948

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.

Upvotes: 0

Franquis
Franquis

Reputation: 743

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;
     });

Upvotes: 0

Related Questions