Question

我在删除行后尝试重新计算总计，但它没有删除。我想找到一种方法来引用最后一行和最后一个单元格并使用新的总计（来自输入字段）来使用Javascript替换收据中的总计。我很感激任何建议。

我会放置我的代码，但是堆栈流代码太多了，所以我会尽力把主代码放在这里。

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

使用find()。这是一个可以帮助您的示例：

＆＃13;

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

＆＃13;

Answer 2

您的选择语句似乎过于复杂，要获取任何行的最后一个单元格，您可以通过row.cells[row.cells.length-1]表达式访问它

所以要获得最后一个单元格，只需使用：

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

您可以在MDN上找到关于TableElement.rows的描述性示例。

它是rows.length - 1的原因仅仅是因为在javascript中，数组被索引为0，因此长度比数组中的最后一个索引多1个

要了解更多关于如何修改代码以使其在未来更好，更易于维护的问题，check my answer关于购物车的另一个问题。也许它会给你更多的想法来解决你的问题。

使用Javascript引用最后一行，最后一个单元格

2 个答案: