jQuery Auto Inkrement Nummer auf td Tabelle

Question

Wie Inkrement Nummer auf table hinzufügen, wenn neue Zeile mit jQuery hinzugefügt?

<table> 
    <th>No.</th> 
    <th>Name</th> 

    <tr> 
    <td>1</td> 
    <tr> 
    <td>2</td> 
</table> 

Hier ist der Code für neue Zeilen hinzufügen

var num = 1; 
$('table').prepend('<tr><td align="center" class="number">'+(num+1)+'</td><td>'+jsonStr.departmentName+'</td></tr>'); 

So hat eine neue Reihe auf zeigen. Vorher:

No | Name 
1 | David 
2 | Mark 

Nach neuen Zeile hinzugefügt:

No | Name 
auto | based on added 
2 | David 
3 | Mark 

Answer 1

Inkrementieren Sie können Ihre hTML ein wenig Ihre Aufgabe zu erleichtern ausrechnen:

<table> 
    <thead> 
     <th>No.</th> 
     <th>Name</th> 
    </thead> 
    <tbody> 
     <tr> 
     <td class="center number">1</td> 
     <td>David</td> 
     </tr> 
     <tr> 
     <td class="center number">2</td> 
     <td>Mark</td> 
    </tr> 
    </tbody> 
</table> 

Danach die Zahl Manipulation leicht wird:

Demo https://jsfiddle.net/w7csmhwk/

Answer 2

Wenn Sie möchten, das zu tun, dann zuerst mit Typ wie diese versteckt ein Eingabefeld erstellen und speichern Sie die Nummer Zeile auf die verdeckte Eingabe als ein ist

Wert

<input type="hidden" name="rowNum" value=""> 

Und schließlich, wenn Sie Reihe throught jQuery seinen Wert von jQuery ändern hinzufügen wie diese

$('rowNum').val("your latest row") 

und den Wert Ihrer Zeile fertig

Answer 3

Zuerst müssen Sie würden über die zuvor vorhandenen Zeilen kennen, dann einfügen, dann richtig alle Zeilennummern für die vorhandenen Zeilen:

// Find existing rows first 
var $trs = $('table').children("tr"); 

// Then do your prepend/insert, I'm assuming your first row always get the value of 1 
$('table').prepend('<tr><td align="center" class="number">1</td><td>'+jsonStr.departmentName+'</td></tr>'); 

// Then update all the existing values 
$trs.each(function (index) { 
    var $tdNumber = $(this).first("td.number"); 
    $tdNumber.text(index + 2 /* Offset by the number of rows inserted plus 1 to make it ordinal */); 
}); 

Answer 4

$(document).ready(function(){ 
 
    $(".btnAdd").click(function(){ 
 
    
 
    $("table tr").each(function(){ 
 
     var tr=$(this); 
 
     var ftd=tr.find("td:first"); 
 
     var std=tr.find("td:last"); 
 
     var tmpvalue=parseInt(ftd.text()); 
 
     tr.html("<tr><td>"+(tmpvalue+1)+"</td><td>"+std.text()+"</td></tr>"); 
 
    }); 
 
    $("table").prepend("<tr><td>1</td><td>Michael</td></tr>"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>1</td> 
 
    <td>David</td> 
 
    </tr> 
 
    <tr> 
 
    <td>2</td> 
 
    <td>Roy</td> 
 
    </tr> 
 
</table> 
 
<input type="button" class="btnAdd" value="Add" />

Die Hauptlogik sein sollte,

1 - Der neue Datensatz wird immer die Nummer 1 sein eingefügt, so können Sie statisch 1 für die erste td setzen

2 - durch jede tr Iterate und dann die Id begleichen, indem sie durch ein