CODEWITHSUNDEEP
javascript
user3006792
user3006792

Reputation:

Referencing last row, last cell on table using Javascript

I am trying to recalculate the grand total after I delete the row, but it is not deleting. I want to find a way to reference the last row and last cell and use the new grand total (from input field) to replace the grand total in the receipt using Javascript. I would appreciate any suggestions.

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

I would place my code, but stack flow says too much code, so I will do my best putting the main code here.

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;
}

Upvotes: 1

Views: 9131

Answers (2)

Icepickle
Icepickle

Reputation: 12796

Your selection statement seems overly complicated, to get the last cell of any row, you can access it through the row.cells[row.cells.length-1] expression

So to get the last cell, just use:

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

You can find a descriptive example about TableElement.rows on MDN.

The reason why it is rows.length - 1 is simply because in javascript, arrays are 0 indexed, so length is 1 more than the last index in the array

To see a bit more how you could modify your code to make it work better and more easily maintainable in the future, check my answer on another question concerning a shopping cart. Maybe it will give you more ideas how to solve your problem.

Upvotes: 2

ferhado
ferhado

Reputation: 2594

Use find(). Here is an Example which may help you:

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

Upvotes: 0

Related Questions