Question

每次点击添加按钮我都需要动态添加新行。我试着按照下面的方式进行操作。我使用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);

应写成：

$('#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?。

请注意，我不知道这是否可以解决您的问题，但这是一个可以开始的地方。此外，请始终在浏览器中检查开发人员的控制台。它将为您提供有关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>

jquery动态添加新行

3 个答案: