jQuery動態添加新行

Question

我每次單擊添加按鈕時都需要動態添加新行。我嘗試如下操作。我正在使用php codeigniter和jquery。我是jquery的新手，我正在努力如何在jquery中追加新行。 但是這個jQuery函數不起作用.pls幫助我解決這個問題。

<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

希望這里的示例可以為您提供幫助：

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

Answer 2

問題可能出在您的＃addnew.click聲明中。 您將html放在單獨的行上。 這可能會在某些瀏覽器（如果不是全部）中引起問題。 Javascript字符串不能有文字換行符。 如果必須將字符串跨多行分開，則最佳做法是使用串聯。 您的代碼：

 $('#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);

應寫為：

$('#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);

請參閱如何在JavaScript中的多行代碼中斷開字符串？ 有關更多信息。

請注意，我不知道這是否可以解決您的問題，但這是一個起點。 另外，請始終在瀏覽器中檢查開發人員的控制台。 它將為您提供有關JavaScript損壞位置的提示，

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>