Wie dynamisch hinzufügen einer Zeile in der Bootstrap

Habe ich diese Stück code, der sollte Folgendes tun:

Nach der Eingabe in das jeweilige Eingabefeld und drücken Sie die "Zeile Hinzufügen" - Taste ein neue Zeile sollte Hinzugefügt werden, um das Ende der Tabelle. Drücken Sie die "Zeile Löschen" - Taste, entfernen die Letzte Zeile erstellt.

Zu diesem Zeitpunkt, wenn ich drücken Sie eine der Tasten, es wird nicht alles tun.

Als erwähnen, wenn ich bin der überprüfung Chrome' Konsole für alle JS Fehler ich dieses:

Uncaught ReferenceError: $ is nicht definiert

Dies ist die HTML:

<body style="background-color:lavender">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            User
                        </th>
                        <th class="text-center">
                            Password
                        </th>
                        <th class="text-center">
                            IP
                        </th>
                        <th class="text-center">
                            Country
                        </th>
                        <th class="text-center">
                            IP disponibility
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='user0'  placeholder='User' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='pass0' placeholder='Password' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ip0' placeholder='IP' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='country0' placeholder='Country' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ipDisp0' placeholder='IP Details' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

- Und das ist das JS:

    $(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md'  /></td><td><input  name='pass"+i+"' type='text' placeholder='Password'  class='form-control input-md'></td><td><input  name='ip"+i+"' type='text' placeholder='IP'  class='form-control input-md'></td><td><input  name='country"+i+"' type='text' placeholder='Country'  class='form-control input-md'></td><td><input  name='ipDisp"+i+"' type='text' placeholder='IP details'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});

Irgendwelche Ideen auf, was sollte ich ändern in meinem JS ?

Dank

Sind Sie sicher, dass Sie das laden der jQuery-script?
Naja, korrigiert mich wenn ich falsch bin. Ich denke, so. Ich habe bootstrap.min.js + jquerry + mein script.
Wahrscheinlich ist dies eine einfache Fehler beim laden des Skripts. Setze ich den code an ein Turnschuh und es ist ok: jsfiddle.net/chrisbenseler/bzy95wL3/2 werfen Sie einen Blick auf Ihre browser-debug-tool und check die http-Anforderungen und Fehler-Konsole.
Ich habe Sie durch einen. Ich habe, dass Fehler aufgrund der Tatsache, dass ich habe mein script vor jquery und bootstrap. Jetzt funktioniert es einwandfrei. danke Chriss & Nacho

InformationsquelleAutor | 2014-12-10

Schreibe einen Kommentar