SpoolSheet

by Ryan Brown

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <p id="operationsA"></p>
<table>
<tbody id="table_body">
    <tr id="table_body_row">
    <td id="operationsB"></td>
    <td id="operationsC"></td>
    <td id="operationsD"></td>
    <td id="operationsE"></td>
    <td id="operationsF"></td>
  </tr>
  </tbody>
  </table>
      <p id="operationsF"></p>
<br>
<form>
  Job Number:
  <br>
  <input type="text" name="jobN" id="jobN" value="168951-7">
  <br> Spool Size:
  <br>
  <input type="text" name="spoolS" id="spoolS" value="2500">
  <br> Spools:
  <br>
  <input type="text" name="number" id="number" value="5">
</form>
<input type="submit" id="update" value="Update Array">
<br>
<br>
<div id="updated-array"></div>

CSS

#update {
  width: 15em;
  height: 5em;
  color: darkblue;
  background-color: beige;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 40%;
    border: 1px solid black;
}

td {
      border: 1px solid black;
}

JavaScript

document.getElementById("update").onclick = function() {
  myFormSubmit();
};

function myFormSubmit() {
	
  var jobNumber = document.getElementById("jobN").value;
  var spoolSize = document.getElementById("spoolS").value;
  document.getElementById('operationsA').innerHTML = "Spool size: " + spoolSize;
  document.getElementById('operationsB').innerHTML = "Spooling";
  document.getElementById('operationsC').innerHTML = "F";
  document.getElementById('operationsD').innerHTML = jobNumber;
  document.getElementById('operationsE').innerHTML = "Printing";
  document.getElementById('operationsF').innerHTML = "F";
  
  var row = document.getElementById("table_body_row").value;
var tbody = document.getElementById("table_body").value;

for (i = 0; i < 12; i++) {
    tbody.append(row);
}

}