如何在html中创建矩阵然后将其解析为javascript？

Question

所以，我对JavaScript很新，我想为用户创建一个框，输入矩阵mxn，然后将输入解析为JS。我知道如何在html中创建行和列，但我不知道JS。

这是我到目前为止所做的。

＆＃13;

＆＃13;

	<div class="container">
		<div class="well well-lg">
			<h1 class="text-center">Jacobian Method</h1>
			<p>Masukkan matrik</p>
			<form id="inputField" role="form">
				<input type="text" name="field00" size="3">
				<input type="text" name="field01" size="3">
				<input type="text" name="field02" size="3">
				<input type="text" name="field03" size="3">
				<br>
				<input type="text" name="field10" size="3">
				<input type="text" name="field11" size="3">
				<input type="text" name="field12" size="3">
				<input type="text" name="field13" size="3">
				<br>
				<input type="text" name="field20" size="3">
				<input type="text" name="field21" size="3">
				<input type="text" name="field22" size="3">
				<input type="text" name="field23" size="3">
				<br>
				<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
			</form>
			<div id="resultField">
				
			</div>

		</div>
	</div>
	<script type="text/javascript">
		function calcJacobian(){
			var myArr = document.forms.inputField;
			var myControls = myArr.elements['p_id'];
			for(var i =0; i<myControls.length; i++){
				var aControl = myControls[i];
				document.getElementById("resultField").append=aControl;
			}
		}
	</script>

＆＃13;

＆＃13;

＆＃13;

Answer 1

经过一些调整后，代码显示在下方。请注意，变量name_value_array包含一个映射，该映射存储表中的所有值，其中input名称为关键，input值为存储值。

＆＃13;

＆＃13;

<div class="container">
  <div class="well well-lg">
    <h1 class="text-center">Jacobian Method</h1>
    <p>Masukkan matrik</p>
    <form id="inputField" role="form">
      <input type="text" name="field00" size="3">
      <input type="text" name="field01" size="3">
      <input type="text" name="field02" size="3">
      <input type="text" name="field03" size="3">
      <br>
      <input type="text" name="field10" size="3">
      <input type="text" name="field11" size="3">
      <input type="text" name="field12" size="3">
      <input type="text" name="field13" size="3">
      <br>
      <input type="text" name="field20" size="3">
      <input type="text" name="field21" size="3">
      <input type="text" name="field22" size="3">
      <input type="text" name="field23" size="3">
      <br>
      <input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
    </form>
    <div id="resultField">

    </div>

  </div>
</div>
<script type="text/javascript">
  function calcJacobian() {
    var myArr = document.forms.inputField;
    var myControls = myArr;
    var name_value_array = [];
    for (var i = 0; i < myControls.length; i++) {
      var aControl = myControls[i];

      // don't print the button value
      if (aControl.type != "button") {

        // store value in a map
        name_value_array.push(aControl.value, aControl.name);

        document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
      }

    }
    // show map values as a popup
    alert(JSON.stringify(name_value_array));

  }
</script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用＆＃39;以＆＃39;开头的CSS选择器字符串又名^ =获取名称以字段开头的所有值，也许使它成为一个数组，以便同时保存名称值数字：

＆＃13;

＆＃13;

window.calcJacobian = function() {
  var myArr = document.querySelectorAll('input[name^="field"]')
  for (var i = 0; i < myArr.length; i++) {
    var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
    var text = document.createTextNode(results);
    document.querySelector('#resultField').appendChild(text);
  }
}

＆＃13;

#resultField {
  white-space: pre-line;
}

＆＃13;

<div class="container">
  <div class="well well-lg">
    <h1 class="text-center">Jacobian Method</h1>

    <p>Masukkan matrik</p>
    <form id="inputField" role="form">
      <input type="text" name="field00" size="3" />
      <input type="text" name="field01" size="3" />
      <input type="text" name="field02" size="3" />
      <input type="text" name="field03" size="3" />
      <br>
      <input type="text" name="field10" size="3" />
      <input type="text" name="field11" size="3" />
      <input type="text" name="field12" size="3" />
      <input type="text" name="field13" size="3" />
      <br>
      <input type="text" name="field20" size="3" />
      <input type="text" name="field21" size="3" />
      <input type="text" name="field22" size="3" />
      <input type="text" name="field23" size="3" />
      <br>
      <input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
    </form>
    <div id="resultField"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;