Question

这个程序的目标是让我输入一些发票，按一个按钮并添加一个新行，其中包含我输入的值。我使用外部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>

Answer 1

希望这会有所帮助。首先拉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代码

如何使用表单中的数据来创建带有js的表？

1 个答案: