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
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erinnern jquery-Bibliothek muss zuerst platziert werden, als bootstrap, vielleicht wäre dein problem, dein code ist in Ordnung, hier ist der Arbeits-Geige mit jquery 1.11.0
The fiddle [1]: http://jsfiddle.net/gLrhnqo2/
gut zu hören 🙂
InformationsquelleAutor martinezjc
Müssen Sie fügen Sie die Jquery-Skript. Wenn Sie wählen Sie die neueste version funktioniert gut.
InformationsquelleAutor Ignacio Laborde