我有一个带有输入框（数量，价格，折扣和总计）列的HTML表。我制作了一个JS函数，用于根据需要添加任意多的行。我想为每一行的总计列自动显示此公式的值：
（数量*价格）-（数量*价格*（折扣/ 100））。
我尝试了许多JavaScript代码，但一直无法正常工作。
HTML：
<table id="myTable">
<tr>
<th width="65%"></th>
<th align="center" width="5%">Q<br>-ty</th>
<th align="center" width="10%">Price,</br>$</th>
<th align="center" width="5%">Discount,<br>%</th>
<th align="center" width="15%">Total, $<br>(Without tax)</th>
</tr>
<tr>
<td width="65%"><input class="Left" size="100" type="text" name="Description"></td>
<td align="center" width="5%"><input type="number" name="quantity" min="1" max="99"></td>
<td align="center" width="10%"><input type="number" name="summ" min="0" max="999999"></td>
<td align="center" width="5%"><input type="number" name="rate" min="0" max="100"></td>
<td align="center" width="15%"><input align="center" type="number" name="total" min="0" max="99999999"></td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
Javascript：
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input class=\"Left\" size=\"100\" type=\"text\" name=\"Description\">";
cell2.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"quantity\" min=\"1\" max=\"99\"></div>";
cell3.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"summ\" min=\"0\" max=\"999999\"></div>";
cell4.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"rate\" min=\"0\" max=\"100\"></div>";
cell5.innerHTML = "<div align=\"center\"><input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\"></div>";
}
几乎没有什么不同的例子。我div从您的js代码中删除了该代码。
function calc(id) {
var row=id.parentNode.parentNode;
var quant=row.cells[1].getElementsByTagName('input')[0].value;
var price=row.cells[2].getElementsByTagName('input')[0].value;
var disc=row.cells[3].getElementsByTagName('input')[0].value;
if(disc==null || disc=='') {
res=parseFloat(quant)*parseFloat(price);
} else {
var res=(parseFloat(quant)*parseFloat(price))-(parseFloat(quant)*parseFloat(price)*(parseFloat(disc)/100));
}
row.cells[4].getElementsByTagName('input')[0].value=res;
}
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = "<input class=\"Left\" size=\"100\" type=\"text\" name=\"Description\">";
cell2.innerHTML = "<input onkeyup=\"calc(this);\" onchange=\"calc(this);\" type=\"number\" name=\"quantity\" min=\"1\" max=\"99\">";
cell3.innerHTML = "<input onkeyup=\"calc(this);\" onchange=\"calc(this);\" type=\"number\" name=\"summ\" min=\"0\" max=\"999999\">";
cell4.innerHTML = "<input onkeyup=\"calc(this);\" onchange=\"calc(this);\" type=\"number\" name=\"rate\" min=\"0\" max=\"100\">";
cell5.innerHTML = "<input type=\"number\" name=\"total\" min=\"0\" max=\"99999999\">";
} body {
font-family: "Calibri"; margin:0;}
#inTotal {
font-weight: bold;
border-bottom: 2px solid black;
}
.nr {
font-weight: bold;
}
input {
border: none;
background: transparent;
text-align: center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.Left {
text-align: left;
margin-left: 5px;
}<table id="myTable">
<tr>
<th width="65%"></th>
<th align="center" width="5%">Q<br>-ty</th>
<th align="center" width="10%">Price,</br>$</th>
<th align="center" width="5%">Discount,<br>%</th>
<th align="center" width="15%">Total, $<br>(Without tax)</th>
</tr>
<tr>
<td width="65%"><input class="Left" size="100" type="text" name="Description"></td>
<td align="center" width="5%"><input onkeyup="calc(this);" type="number" name="quantity" min="1" max="99" onchange="calc(this);"></td>
<td align="center" width="10%"><input onkeyup="calc(this);" type="number" name="summ" min="0" max="999999" onchange="calc(this);"></td>
<td align="center" width="5%"><input onkeyup="calc(this);" type="number" name="rate" min="0" max="100" onchange="calc(this);"></td>
<td align="center" width="15%"><input align="center" type="number" name="total" min="0" max="99999999"></td>
</tr>
</table>
<button onclick="addRow()">Add Row</button>我添加了一个函数，用于根据输入的每个更改或数字来计算您的公式。
该函数放置在每个input期望的最后一个（onchange="calc(this)和onkeyup=calc(this);）中。我戴onkeyup了一开始input。在这种情况下，输入数字后将进行计算。
如您所见，代码仅是js。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句