如何使用表单中的数据使用 js 制作表格

How do I used data from form to make tables with js?

本文关键字：js 表格数据何使用表单更新时间：2023-09-26

这个程序的目标是让我输入一些发票，按下一个按钮，然后添加一个带有我输入的值的新行。我正在使用外部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标签中