JQuery Tabelle einfügen Zeile an Position
Ive an einer Lösung arbeiten zu können, legen Sie eine Zeile in eine html-Tabelle. Es war ziemlich schwierig. Ich habe etwas gefunden, das funktioniert aber nur für die ersten "einfügen". Ich kann nicht herausfinden, was ich falsch mache.
Ich habe eine einfache Tabelle mit 3 Spalten jeder Tabelle eine Schaltfläche erlauben das einfügen von einer Zeile zwischen 2 Zeilen. Ich habe searhed auf dieser Seite nach einer Lösung und bekam ein jquery-Lösung, die funktioniert ich.e wenn ich die Taste drücken, es fügt die Zeile, wo ich es will. Aber wenn ich das hinzufügen einer weiteren Zeile nach dem, wo ich eingesetzt die Letzte Zeile, die Zeile eingefügt-1-position zurück, das nächste mal, wenn ich drücken Sie die Taste, die eingefügten 2 Zeilen zurück, etc. Ich kann nicht herausfinden, was ich falsch mache jeder weiß, warum die das machen?
Noch besser ist, dass es einen besseren Weg, dies zu tun? ich.e fügen Sie eine Zeile in eine Tabelle auf jeder postion?
JQuery code;
<script>
$(document).ready(function(){
$(".addRow").click(function(event){
//get the button id to get the row
var $id=this.id;
var $totrecords;
var $newrow;
var $totalrowsadded;
//get id of clicked button
$id=$id.replace("add_", "");
$totrecords=document.getElementById('totalrecords').value;
$totrecords++;
//store number of rows added
$totalrowsadded=document.getElementById('totalrowsadded').value;
$totalrowsadded++;
document.getElementById('totalrowsadded').value=$totalrowsadded;
//update record count
document.getElementById('totalrecords').value=$totrecords;
var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>';
$newrow=parseInt($id)+1;
alert('new row insert at '+$newrow);
$('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html);
});
});
</script>
Meine Tabelle sieht wie folgt aus;
<table id="productstable">
<tr>
<th>Insert</th>
<th>Height</th>
<th>Width</th>
<th>List price</th>
</tr>
<tbody>
<tr id="0">
<td>0 :<button type="button" class="addRow" id="add_0">add</button></td>
<td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td>
<td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td>
<td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td>
</tr>
<tr id="1">
<td>1 :<button type="button" class="addRow" id="add_1">add</button></td>
<td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td>
<td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td>
<td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td>
</tr>
<tr id="2">
<td>2 :<button type="button" class="addRow" id="add_2">add</button></td>
<td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td>
<td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td>
<td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td>
</tr>
<tr id="3">
<td>3 :<button type="button" class="addRow" id="add_3">add</button></td>
<td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td>
<td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td>
<td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td>
</tr>
</tbody>
</table>
InformationsquelleAutor fuzzy dunlop | 2012-03-14
Du musst angemeldet sein, um einen Kommentar abzugeben.
Möchten Sie die JQuery -
append
Funktion:Hinzufügen einer Zeile nach der Zeile mit der Schaltfläche, auf die geklickt wurde, verwenden Sie diese:
Den
closest
Funktion Spaziergänge auf den Baum zu finden, der nächste TR, dannafter
es nach.im mit cakephp 2.0, so das ist, warum die Ausgabe so ist.
append hängt nur an den Anfang der Tabelle..
Nein, es sollte gehen zu Ende (fügt als letztes untergeordnetes Element), siehe die Dokumentation: api.jquery.com/append
ich muss hinzufügen einer Zeile an einer bestimmten position in der Tabelle ich.e, wo der button geklickt wird.
InformationsquelleAutor Jon Grant
Hier ist, wie Sie anfügen können, nach eine Zeile: (Sie müssen verwenden
after
und nichtappend
)Heres eine live-Beispiel, die ich schrieb, um dies zu demonstrieren.
InformationsquelleAutor Ben