0

追加ボタンをクリックするたびに新しい行を動的に追加する必要があります.私は以下のようにそれをやろうとしました.私はphp codeigniterと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>';
4

3 に答える 3

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 に答える