如何在html中創建矩陣，然後將其解析爲javascript？

所以，我相當新的JavaScript，我想創建一個框供用戶輸入矩陣mxn然後解析輸入到JS。我知道如何在html中創建行和列，但我不知道JS。如何在html中創建矩陣，然後將其解析爲javascript？

這是我到目前爲止。

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

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

來源

2015-05-21 Anna RG

* myArr，該*是一種形式，* myControls *將取消定義d因爲沒有名稱爲「p_id」的控件，只需刪除（即使用'var myControls = myArr.elements;'。點擊提交按鈕後，表單將提交，您將看到頁面刷新。將輸入類型提交更改爲鍵入按鈕。 – RobG

我在網上看到一些教程，寫得很混亂，這就是爲什麼我很困惑。感謝所有的迴應！ –

你有沒有得到你需要的答案？ – EduardoFernandes

經過幾次調整，代碼如下所示。請注意，變量name_value_array包含一張存儲表中所有值的映射，其中包含名稱input和存儲值input的值。

<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>

來源

2015-05-21 02:52:10 EduardoFernandes

感謝您的回覆。我不明白的是爲什麼數組不打印。所以，在你的代碼中，'appendChild'部分將其打印到屏幕上，但它立即消失。對不起，我不熟悉那個語法。 –

'appendChild'不會在屏幕上打印，但它不會消失。如果您執行代碼並按下「計算」，您會看到附加內容仍然存在。此外，彈出窗口顯示保存'name_value_array'地圖的值。 – EduardoFernandes

嘗試的CSS選擇器字符串「以」又名^ =搶用名稱的所有值開頭的領域，也許會讓一個數組，以便在保存名稱值數同時：

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); 
 
    } 
 
}

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

<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>

來源

2015-05-21 02:59:24 oMiKeY

如何在html中創建矩陣，然後將其解析爲javascript？

回答

相關問題