这个程序的目标是让我输入一些发票，按一个按钮并添加一个新行，其中包含我输入的值。我使用外部JS文件添加新行。代码将遵循。
function myFunction() {
var Product1 = oForm.elements["Product"].value;
var Description1 = oForm.elements["Description"].value;
var UnitCost1 = oForm.elements["UnitCost"].value;
var Units1 = oForm.elements["Units"].value;
var Total1 = UnitCost1 * Units1;
var table = document.getElementById("invoiceTable");
var row = table.insertRow(1);
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 = Product1;
cell2.innerHTML = Description1;
cell3.innerHTML = UnitCost1;
cell4.innerHTML = Units1;
cell5.innerHTML = Total1;
}#headder {
height: 100px;
width: 1000px;
border-style: solid;
border-width: 1px;
}
#Table {
min-height: 300px;
width: 1000px;
border-style: solid;
border-width: 1px;
}
#footer {
height: float;
width: 1000px;
border-style: solid;
border-width: 1px;
}
p {
font-size: 25px;
font-weight: bold;
}
table {
border-collapse: collapse;
width: 90%
}
th,
td {
border-style: solid;
border-width: 1px;
}<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="Style.css">
<script src="invoice.js"></script>
<head>
</head>
<body>
<div align="center">
<div id="headder">
<p>Invoice Generator</p>
</div>
<div id="Table">
<table id="invoiceTable">
<tr>
<th>Product</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Units</th>
<th>Total</th>
</tr>
</table>
</div>
<div id="footer">
<form>
Product:
<br>
<input type="text" name="Product">
<br>Description:
<br>
<input type="text" name="Description">
<br>Unit Cost:
<br>
<input type="text" name="UnitCost">
<br>Units:
<br>
<input type="text" name="Units">
<br>
<br>
<input type="button" value="Submit" onclick="invoice()">
</form>
</div>
</div>
</body>
</html>希望这可以帮助。首先拉JQuery，因为你说你可以使用它。
<form>
Product:
<br>
<input type="text" name="Product">
<br>Description:
<br>
<input type="text" name="Description">
<br>Unit Cost:
<br>
<input type="text" name="UnitCost">
<br>Units:
<br>
<input type="text" name="Units">
<br>
<br>
<input type="button" value="Submit" onclick="invoice()">
</form><form>
Product:
<br>
<input type="text" name="Product" id="Product">
<br>Description:
<br>
<input type="text" name="Description" id="Description">
<br>Unit Cost:
<br>
<input type="text" name="UnitCost" id="UnitCost">
<br>Units:
<br>
<input type="text" name="Units" id="Units">
<br>
<br>
<input type="button" value="Submit" onclick="invoice()">
</form>
----- JS -----
var products = $('#Product').val();
var description = $('#Description').val();
var unitCost = $('#UnitCost').val();
var units = $('Units").val();
$('#invoiceTable tr:last').after('<tr>' +
'<td>' + products + '</td>' +
'<td>' + description + '</td>'
'<td>' + unitCost + '</td>'
'<td>' + units + '</td>'
'</tr>');
我认为这应该有效。请注意，我在您的id="field标签中添加了input