Fixieren der Nummerierung in der dynamischen Tabelle

Question

Ich habe eine dynamische HTML-Tabelle. Wenn ich die Schaltfläche "Hinzufügen" drücke. Eine neue Zeile wird an die Tabelle angehängt. Jede Zeile hat eine Abbrechen-Schaltfläche, um sich selbst zu entfernen.

Das Problem ist nach dem Entfernen und Hinzufügen einer neuen Zeile. Die Nummerierung ist falsch. Der Wert in der Spalte "Text" ist ebenfalls falsch (nicht in der richtigen Reihenfolge).

Hier ist mein Skript:

html:

<input type="button" value="Add" id="btn_add" style="font-weight:bold" /><br /> 

<table id="t_output" border="1"> 
<tr class="info"> 
<td><strong>No</strong></td> 
<td><strong>Text</strong></td> 
<td><strong>Action</strong></td> 
</tr> 
</table> 

jQuery:

$("#btn_add").click(function() { 
    var rowCount = $("#t_output tbody tr").length; 

    c_no = "<td>" + rowCount + " </td>"; 
    c_txt = "<td>TEXT" + (999 - rowCount) + "</td>"; 
    c_act = "<td align = 'middle'><input type='button' value='Cancel' id='del_btn' class='btn btn-danger' /></td>"; 

    t_rows = "<tr>" + c_no + c_txt + c_act + "</tr>"; 
    $("#t_output tbody").append(t_rows); 
}); 

$('#t_output').on('click', '#del_btn', function() { 
    $(this).closest('tr').remove(); 
}) 

und eine Geige: https://jsfiddle.net/9fujvb21/

Ich ziehe den Code nicht zu viel, wenn posibble zu ändern . Vielen Dank für Ihre Hilfe

Answer 1

Hier ist ein Ansatz:

function reCalculate() { 
    $('#t_output tr:not(.info)>td:first-child').each(function(i) { 
     $(this).text(i+1); 
    }); 
} 

ich diese Funktion schrieb neue Nummern auf alle Zeilen zuordnen berechnen, wenn sie aufgerufen wird. Jetzt rufen wir diese Funktion einfach immer dann auf, wenn wir Zahlen neu berechnen und den Zeilen zuweisen müssen.

Hier ist die aktualisierte fiddle.

---

UPDATE

function reCalculate() { 
    $('#t_output tr:not(.info)').each(function(i) { 
    $(this).find('td:first-child').text(i+1).next().text('TEXT'+(999-i)); 
    }); 
} 

Hier ist die aktualisierte fiddle.