Question

我有一个HTML表格，其中包含输入框列（数量，价格，折扣和总计）。我创建了一个JS函数，用于添加尽可能多的行。我想让每一行的Total列自动显示该公式的值：

（数量*价格） - （数量*价格*（折扣/ 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>";
}

My code on FIDDLE.

Answer 1

没有什么不同的例子。我从您的js代码中删除了div。

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的最开头。在这种情况下，将在输入数字后进行calucation。

代码就像你可以看到的那样只有js。

如何自动对HTML表中每行的输入值框求和

1 个答案: