我有一个表，用户可以根据需要动态添加一行。我需要在表格下方添加一个文本框，该文本框将使用 JavaScript 动态输出最后一列的总数。如果无法动态完成计算，那么我可以在文本框下方添加一个计算按钮<HTML><HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javascript">function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; if (rowCount < 4) { // limit the user from creating fields more than your limits var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; row.id = 'row_'+rowCount; for (var i = 0; i < colCount; i++) { var newcell = row.insertCell(i); newcell.outerHTML = table.rows[0].cells[i].outerHTML; } var listitems= row.querySelectorAll("input, select"); for (i=0; i<listitems.length; i++) { listitems[i].setAttribute("oninput", "calculate('"+row.id+"')"); } } else { alert("Maximum Passenger per ticket is 4."); }}function calculate(elementID) { var mainRow = document.getElementById(elementID); var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value; var myBox3 = mainRow.querySelectorAll('[name^=sel]')[0].value; var total = mainRow.querySelectorAll('[name=total]')[0]; var myResult1 = myBox1 * myBox3; total.value = myResult1;}任何帮助将不胜感激。
2 回答
Helenr
TA贡献1780条经验 获得超4个赞
在这里试试这个。
我首先添加了总和tfoot，但是添加新行的方式让它变得很尴尬，所以我只是把它放在表格底部的一个 div 中。
<html>
<head>
<title>Add/Remove dynamic rows in HTML table</title>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 4) {
// limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
row.id = "row_" + rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.outerHTML = table.rows[0].cells[i].outerHTML;
}
var listitems = row.querySelectorAll("input, select");
for (i = 0; i < listitems.length; i++) {
listitems[i].setAttribute("oninput", "calculate('" + row.id + "')");
}
} else {
alert("Maximum Passenger per ticket is 4.");
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll("[name=qty]")[0].value;
var myBox3 = mainRow.querySelectorAll("[name^=sel]")[0].value;
var total = mainRow.querySelectorAll("[name=total]")[0];
var myResult1 = myBox1 * myBox3;
total.value = myResult1;
// calculate the totale of every total
var sumContainer = document.getElementById("totalOfTotals");
var totalContainers = document.querySelectorAll("[name=total]"),
i;
var sumValue = 0;
for (i = 0; i < totalContainers.length; ++i) {
sumValue += parseInt(totalContainers[i].value);
}
sumContainer.textContent = sumValue;
}
</script>
</head>
<body>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<table id="dataTable" class="form" border="1">
<tbody>
<tr id="row_0">
<p>
<td>
<label>Quantity</label>
<input
type="number"
required="required"
name="qty"
oninput="calculate('row_0')"
/>
</td>
<td>
<label for="sel">Price</label>
<select name="sel" id="sel" oninput="calculate('row_0')" required>
<option value="" disabled selected>Choose your option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
<label for="total">Total</label>
<input
type="text"
required="required"
class="small"
name="total"
/>
</td>
</p>
</tr>
</tbody>
</table>
<div>
<tr>
<span>Sum</span>
<span id="totalOfTotals">0</span>
</tr>
</div>
</body>
</html>
BIG阳
TA贡献1859条经验 获得超6个赞
我相信您想获得整个表中最后一列的总值。
然后我认为您需要迭代列。使用下面的功能代码。
function totalvalues() {
var table = document.getElementById("dataTable");
var totalcellvalue = 0;
for (var i = 0, row; row = table.rows[i]; i++) {
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//columns would be accessed using the "col" variable assigned in the for loop
if (j == 2) {
//alert('col html>>'+col.children[1].value);
totalcellvalue += parseInt(col.children[1].value);
}
}
}
console.log(totalcellvalue);
}
// And I have called the above method ```totalvalues()`` in your ```calculate()``` method.
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount < 4) { // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
row.id = 'row_' + rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.outerHTML = table.rows[0].cells[i].outerHTML;
}
var listitems = row.querySelectorAll("input, select");
for (i = 0; i < listitems.length; i++) {
listitems[i].setAttribute("oninput", "calculate('" + row.id + "')");
}
} else {
alert("Maximum Passenger per ticket is 4.");
}
}
function calculate(elementID) {
var mainRow = document.getElementById(elementID);
var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;
var myBox3 = mainRow.querySelectorAll('[name^=sel]')[0].value;
var total = mainRow.querySelectorAll('[name=total]')[0];
var myResult1 = myBox1 * myBox3;
total.value = myResult1;
totalvalues();// calling my function here
}
</SCRIPT>
</HEAD>
<BODY>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<table id="dataTable" class="form" border="1">
<tbody>
<tr id='row_0'>
<p>
<td>
<label>Quantity</label>
<input type="number" required="required" name="qty" oninput="calculate('row_0')">
</td>
<td>
<label for="sel">Price</label>
<select name="sel" id="sel" oninput="calculate('row_0')" required>
<option value="" disabled selected>Choose your option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
<label for="total">Total</label>
<input type="number" required="required" class="small" name="total">
</td>
</p>
</tr>
</tbody>
</table>
</BODY>
</HTML>
添加回答
举报
0/150
提交
取消