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>