jquery dynamicaly添加新行

Question

我需要動態添加新行，每次點擊添加button.i試圖做下面的。我使用php codeigniter和jquery.i'm新jquery和我掙扎關於如何在jquery中追加新行。但是這個jquery函數不能正常工作。請幫我解決這個問題。

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

更多這方面的信息，請參閱How do I break a string across more than one line of code in 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); 

應寫入。

請注意，我不知道這是否會解決您的問題，但它是一個開始的地方。另外，請始終在瀏覽器中檢查開發者控制檯。它會給你提示在哪裏你的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>