Referenzieren der letzten Zeile, letzte Zelle in der Tabelle mit Javascript

Question

Ich versuche, die Gesamtsumme neu berechnen, nachdem ich die Zeile löschen, aber es wird nicht gelöscht. Ich möchte einen Weg finden, die letzte Zeile und die letzte Zelle zu referenzieren und die neue Gesamtsumme (aus dem Eingabefeld) zu verwenden, um die Gesamtsumme in der Quittung durch Javascript zu ersetzen. Ich würde mich über Vorschläge freuen.

https://jsfiddle.net/x54tbmt5/1/

Ich würde meinen Code platzieren, aber Stack Fluss sagt zu viel Code, also werde ich mein Bestes tun, hier den Hauptcode setzen.

JS:

// adds grand total row 
function addGrandTRow() { 
var tableRef = $("receiptOrders"); 
var newRow = tableRef.insertRow(-1); // insert new row at the end 
var newCell = newRow.insertCell(0); // insert new cell at the end 

// Append a text node to the cell 
var newText = document.createTextNode("Grand Total"); 
newCell.appendChild(newText); 


var secondCell = newRow.insertCell(-1); 
var emptyText= document.createTextNode(""); 
secondCell.appendChild(emptyText); 
secondCell.colSpan = "8"; 
secondCell.style.backgroundColor = "#eee"; 

var nthCell = newRow.insertCell(-1); 
var grandTotalValue = document.createTextNode($("grandTotal").value); 
nthCell.appendChild(grandTotalValue); 

grandTotalHolder.push(grandTotalValue); // adds order 

console.log("Number of Rows in table: " + tableRef.rows.length); 

} 

function deleteRow() { 
// converts number into integer 
var itemNumber = parseInt(prompt ("enter item number to delete")); 
if (itemNumber == NaN || itemNumber < 1) { 
prompt ("enter item number"); 
} else { 
var table = $("receiptOrders"); 
var rowCount = table.rows.length; 
table.deleteRow(itemNumber); 
for(var i=1; i < rowCount-1; i++) { 
table.rows[i].cells[0].innerHTML = i; // renumbers the list after delete row 
rowCount--; // after delete row, need to decrease number of rows 
} 
} 
// if all the rows are deleted except header and grand total, button is 
disabled 
if (rowCount == 2) { 
$("deleteRowbtn").disabled = true; // button is disabled 
} 

// grand total input field 
// item number - 1: calculates the correct index when row is deleted. 
var newGrandTotal = parseFloat($("grandTotal").value) 
- orderTotalHolder[itemNumber-1]; 
// converts to string, 2 numbers after decimal 
$("grandTotal").value = newGrandTotal.toFixed(2); 

// recalculate total 
var tableRef = $("receiptOrders"); 
var rows = tableRef.getElementsByTagName('tr'); 
var cells = tableRef.getElementsByTagName('td'); 
var lastRow = rows[rows.length]; 
var lastCell = rows[rows.length]; 
lastRow.lastCell.innerHTML = $("grandTotal").value; 
} 

Answer 1

Ihre Auswahl Aussage scheint zu kompliziert, um die letzte Zelle jeder Zeile zu erhalten, können Sie es durch die row.cells[row.cells.length-1] Ausdruck zugreifen können

Um die letzte Zelle zu erhalten, verwenden Sie einfach:

let lastRow = table.rows[table.rows.length-1]; 
let lastCell = lastRow.cells[lastRow.cells.length-1]; 

Sie können ein beschreibendes Beispiel abou finden t TableElement.rows auf MDN.

Der Grund, warum es rows.length - 1 ist einfach, weil in Javascript, Arrays 0 indiziert sind, so Länge

im Array 1 mehr als der letzte Index ist ein bisschen mehr zu sehen, wie Sie Ihren Code ändern könnte zu machen es funktioniert in Zukunft besser und leichter wartbar, check my answer auf eine andere Frage bezüglich eines Einkaufswagens. Vielleicht gibt es Ihnen mehr Ideen, wie Sie Ihr Problem lösen können.

Answer 2

Verwendung find(). Hier ist ein Beispiel, das Ihnen helfen kann:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<table> 
 
\t <tr><td>test1</td><td>test2</td><td>test3</td></tr> 
 
\t <tr><td>test4</td><td>test5</td><td>test6</td></tr> 
 
\t <tr><td>test7</td><td>test8</td><td>test9</td></tr> 
 
</table> 
 
<script> 
 
\t var table=$('table'); 
 
\t var lastRow=table.find('tr:last'); 
 
\t var lastCell=lastRow.find('td:last'); 
 
\t console.log(lastCell.text()); 
 
</script>