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?

InformationsquelleAutor yvonnezoe | 2013-04-19

1

nur aufrufen dieser code jedes mal, wenn Sie hinzufügen oder löschen Sie die Zeile
```
function updateIndex() 
{ 
    $("#status_table tr").each(function(){
      $( this ).find( "td" ).first().html( $(this).index() + 1 );
    });
}
```
- kannst du plz erklären, was $(this) in Ihrem html Funktion tr or td ich denke, es ist td und jeder td im ersten tr ist 1 so dass alle die erste td Ausgabe 1.
- ein weiterer Vorschlag, um Sie zu verwenden $(this).closest('tr').index() dieser Ausgabe wird die tr index
- Es ist tr, und dann bin ich der Eingabe der Wert in der ersten td-by-doing-filter auf tr-s Kinder
- es scheint, td, weil Sie verwendet werden find() Methode und Ihre aktuelle Objekt ist td nicht tr Schätze ich mal.
- $(this) entsprechen dem aktuellen tr von der Schleife auf die find('td').first() gibt den ersten td der Zeile, und die index dieser Zeile wird festgelegt, wie der Wert der td.
- Ja, nach find(), erhalten Sie td. Ich habe es in einem fiddle hier
- Danke Jungs. Meinst du, nachdem ich auf hinzufügen/entfernen kann ich nur setzen Sie updateIndex() unten? Wie für die Funktion, ich werde auch in der javascript-Recht? und brauche ich zum initialisieren der index oder erstellen Sie eine variable irgendwo?
- Ja, das ist es, was ich meinte
- Frage: gibt es eine Möglichkeit, Sie zu ignorieren <tr><th> Zeilen? Dieser code zählt nicht nur <tr><td>, aber auch <th>. Irgendwelche Ideen?
InformationsquelleAutor ripu1581
0

probieren Sie etwas wie dieses,FIDDLE
```
        $(function(){
            $('#outputCB').change(function () {
                if (this.checked) {
                    var index = $('#status_table tbody tr').length + 1
                    $('#status_table tr:last').after('<tr id="output_newrow_1"><td>'+index+'</td><td>testing</td></tr>');
                } else {
                    $('#status_table').find("#output_newrow_1").remove();
                }

            });
        })
```
- danke Jungs @qais und @rajesh! aber ich konnte es nicht eventuell eine Funktion für alle Ausgaben die ich habe.. (ich habe 96 Ausgänge und es gibt andere ähnliche Dinge...) ich denke, mit einem text-Eingabe anstelle von checkbox-jetzt... also ich werde das Hinzufügen und Entfernen von Schaltflächen. Wird es einfacher sein? ich muss auch zur post, die Zahl, die Benutzereingabe angezeigt werden.ich habe es in einfacher Weise durch zuweisen der ID an jeden, bekommen Wert und Anzeige auf dem Tisch. gibt es eine einfachere Möglichkeit?
- Sie können es in einer Funktion mithilfe von class statt id
- sorry.. aber ich verstehe nicht 🙁
InformationsquelleAutor rajesh kakawat

Wenn Sie jemals wollen, um zu überspringen <th> Zeilen der Zähler wird inkrementiert:

var th_rows_counter = 0;
var all_rows_counter = 0;
$("#icontable tr").each(function() {
    all_rows_counter++;
    $( this ).find( "td" ).first().html( all_rows_counter - th_rows_counter ); //replace <td> content with the counter
    $( this ).find( "th" ).first().each(function(){th_rows_counter++;}); //increment the counter of <th> rows
});

oder für das überspringen <td> mit verschiedenen css-Stil, den Sie verwenden können, nicht () - Funktion: $( this ).find( "td" ).nicht(".otherstyle").

InformationsquelleAutor Eugene Kardash

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.