jquery dynamicaly add new row

Question

I need to dynamically add new rows each time click on add button.i tried to do it as below.i'm using php codeigniter and jquery.i'm new to jquery and i'm struggling on how to append new row in jquery. But this jquery function is not working.pls help me to sole this problem.

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
     var addDiv = $('#addinput');
     var i = $('#addinput p table class="datatable <tr><td width="200">').size() + 1;

     $('#addNew').live('click', function() {
         alert('ok');
         alert(i);
         $('<p>
         <label for="trainer">Trainer: </label>
        <td><select name="state_' + i +'"">
        <option></option>
        </select>
        <select>
        <option></option>
        </select></td></tr></table>
        <a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);

         i++;

             return false;
     });

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


echo '<div id="addinput">';
        echo '<p>';
        echo '<table class="datatable">';
        echo '<tr><td width="200">'.form_label('Trainer: ', 'trainer').'</td>';
        $options4 = array(
                0   =>  'Select state',
                1   =>  'QLD',
                2   =>  'NSW',
                3   =>  'VIC',
                4   =>  'WA',
                5   =>  'ACT',
                6   =>  'NT',
                7   =>  'SA',
                8   =>  'TAS'
        );
        $options5[0] = 'Select below';
        foreach ($trainers as $row) {
            $name = $row->first_name.' '.$row->last_name;
            $options5[$row->id] = $name;
        }
        echo '<td>'.form_dropdown('state', $options4, '', 'class="update_state" id="state"').' '.form_dropdown('trainers[]', $options5, 0).'<a href="#" id="addNew">Add</a></td></tr>';
        echo '</table>';
        echo '</p';
        echo '</div>';

Answer 1

Hope this example here can help you:

http://fiddle.jshell.net/GxhSR/

Answer 2

The problem may be in your #addnew.click declaration. You are placing the html on separate lines. This can cause problems in some browsers (if not all). Javascript Strings cannot have literal line breaks. If you must separate the string across multiple lines, it is best practice to use concatenation. Your code:

 $('#addNew').live('click', function() {
     alert('ok');
     alert(i);
     $('<p>
     <label for="trainer">Trainer: </label>
    <td><select name="state_' + i +'"">
    <option></option>
    </select>
    <select>
    <option></option>
    </select></td></tr></table>
    <a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);

Should be written as:

$('#addNew').live('click', function() {
    alert('ok');
    alert(i);
    $('<p>' +
        '<label for="trainer">Trainer: </label>' +
        '<td><select name="state_' + i +'"">' +
        '<option></option>' +
        '</select>' +
        '<select>' +
        '<option></option>' +
        '</select></td></tr></table>' +
        '<a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);

See How do I break a string across more than one line of code in JavaScript? for more information on this.

Note that I don't know if this will fix your problem but it is a place to start. Also, Always check the developer's console in your browser. It will give you hints on where your javascript is broken,

Answer 3

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
     var addDiv = $('#addinput');
     var i = $('#addinput p').size() + 1;

     $('#addNew').live('click', function() {
      $('<p>'+
                   '<table id="datatable"><tr><td width="200"></td><td>'+
                    '<select name="state_' + i +'" id="state">'+
                    '<option value="0">Select State</option>'+
                    '<option value="1">QLD</option>'+
                    '<option value="2">NSW</option>'+
                    '<option value="3">VIC</option>'+
                    '<option value="4">WA</option>'+
                    '<option value="5">ACT</option>'+
                    '<option value="6">NT</option>'+
                    '<option value="7">SA</option>'+
                    '<option value="8">TAS</option>'+
                    '</select><select name="trainer_' + i +'" id="trainer"><option></option></select>'+
                    '<a href="#" id="remNew">Remove</a></td></tr></table></p>').appendTo(addDiv)
         i++;
     });

    $('#remNew').live('click', function() { 
            if( i > 2 ) {
            $(this).parents('p').remove();
            i--;
       }

});
});
</script>