jQuery how to add index-Nummer dynamisch in eine Tabelle
Ich habe eine Tabelle erstellt und ich kann hinzufügen und entfernen von Zeilen mithilfe von jQuery, wenn eine checkbox aktiviert ist. Meine Frage hier ist, wie kann ich eine index-Nummer in der ersten Spalte dynamisch?
Meinem Tisch:
<div>
<table class="config" id="status_table">
<thead>
<tr>
<th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Output Status</th>
</tr>
<tr>
<th>Index</th>
<th>Output Type</th>
<th>Output Number</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td ><p id="type_row_one"></p></td>
<td ><p id="number_row_one"></p></td>
<td>
<img class="image" id = "off" style="margin-left:20px" src="static/OffLamp-icon.png" >
<img class="image" id = "on" style="margin-left:20px" src="static/OnLamp-icon.png" >
</td>
</tr>
</tbody>
</table>
</div>
Mein jQuery:
$('#outputCB').change(function(){
if($('#outputCB_1').is(':checked')){
$('#status_table tr:last').after('<tr id="output_newrow_1"><td>index+1</td><td>testing</td></tr>');}
else{
$('#status_table').find("#output_newrow_1").remove();
}
});
Also statt "index+1"
ich will, dass es in der Lage sein zu Inkrementieren, die aus dem vorherigen index-Nummer, und abnehmen, wenn die Zeile entfernt wird.
Wie soll ich es tun? Kann ich einer Variablen zuweisen und ++1 oder --1 Javascript? Ich weiß wirklich nicht, wo zu beginnen....
UPDATE:
Ich habe versucht, diese scheiterte aber:
var index=1;
$('#outputCB').change(function(){
if($('#outputCB_1' ||'#outputCB_2').is(':checked')){
index++;
$('#status_table tr:last').after('<tr id="output_newrow_'+index+'"><td>'+index+'</td><td id="type_row_'+index+'">type_row_'+index+'</td><td id="num_row_'+index+'">num row '+index+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');
}
else{
index--;
$('#status_table').find("#output_newrow_'+index+'").remove();
}
});
es wird nie alles entfernen und es hat 2 Zeilen zu einer Zeit, als #outputCB_1 erneut geprüft. :/Warum ist das so? (sorry, das ist zu lang für einen Kommentar.)
- kann nicht finden, die Letzte tr?
Du musst angemeldet sein, um einen Kommentar abzugeben.
nur aufrufen dieser code jedes mal, wenn Sie hinzufügen oder löschen Sie die Zeile
$(this)
in Ihremhtml
Funktiontr or td
ich denke, es ist td und jedertd
im ersten tr ist1
so dass alle die erstetd
Ausgabe1
.$(this).closest('tr').index()
dieser Ausgabe wird die tr indexfind()
Methode und Ihre aktuelle Objekt ist td nicht tr Schätze ich mal.$(this)
entsprechen dem aktuellentr
von der Schleife auf diefind('td').first()
gibt den erstentd
der Zeile, und dieindex
dieser Zeile wird festgelegt, wie der Wert dertd
.probieren Sie etwas wie dieses,FIDDLE
Wenn Sie jemals wollen, um zu überspringen <th> Zeilen der Zähler wird inkrementiert:
oder für das überspringen <td> mit verschiedenen css-Stil, den Sie verwenden können, nicht () - Funktion: $( this ).find( "td" ).nicht(".otherstyle").