0

每次单击添加按钮时，我都需要动态添加新行。我尝试按如下方式进行操作。我正在使用 php codeigniter 和 jquery。我是 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>';
4

3 回答 3

1

希望这里的这个例子可以帮助你：

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

于 2013-10-18T00:43:02.103 回答
0 
<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>
于 2013-10-18T04:22:44.040 回答
0

问题可能出在您的#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在哪里被破坏，

于 2013-10-18T03:31:33.270 回答