Question

单击“确定”时，我的代码会生成二维矩阵。代码将数据存储在多维数组中，但我尝试将代码添加到代码中，该代码使用第4个文本框以升序重新排列代码。有关如何做到这一点的任何建议？

HTML代码

<div class="rightDiv">
<div id = "pastcalcblock"> 
    <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "display()"/>
         <div id = "resultTab">
                SORT<br>
                    <input type = "button" value = "As Entered" id = "enteredBut">
                    <input type = "button" value = "By Result" id = "resultBut" onClick = "sort()"><br><br>
                    <div id="expressions">
                    </div>                
            </div>
        </div>

Javascript代码

    function display()
    {
    var arrayOne =[document.getElementById('text1').value,document.getElementById('text2').value,document.getElementById('text3').value,document.getElementById('text4').value ];

      new_array=arrayOne.join(" ");
    var para = document.createElement("p");
    var t = document.createTextNode(new_array);
    para.appendChild(t)
    document.getElementById("expressions").appendChild(para);

    }



 function sort(){
            var dispArr = [document.getElementById('text1').value, 
document.getElementById('text2').value, document.getElementById('text3').value,document.getElementById('text4').value];
            var myArray = [];
             for(var i = 0 ; i < 1 ; i ++ ) {
                 myArray[i] = [];
                 for(var j = 0 ; j < 5 ; j++ )
                 {
                     myArray[i][j] = dispArr[j];
                     console.log(myArray[i][j]);
                  } 
             }


        }

Answer 1

你最好将整个矩阵保存在一个内存变量中，然后添加它。还要考虑当输出排序时，您必须知道如何返回原始顺序，以便“输入”按钮仍然具有所需的效果。因此，最好有一个从头开始的显示功能，清空输出并以输入或排序顺序重现所有数据。

以下是如何做到这一点：

var matrix = []; // global value with all data

function addExpression() {
    var arrayOne = [
        document.getElementById('text1').value,
        document.getElementById('text2').value,
        document.getElementById('text3').value,
        document.getElementById('text4').value 
    ];
    // add to matrix
    matrix.push(arrayOne);
    display(false);
}

function display(byResult) {
    // Determine whether to sort or not:
    var matrix2 = byResult ? sorted(matrix) : matrix;
    // display each row:
    var expressions = document.getElementById("expressions");
    expressions.innerHTML = ''; // empty completely
    matrix2.forEach( row => {
        var para = document.createElement("p");
        var t = document.createTextNode(row.join(" "));
        para.appendChild(t)
        expressions.appendChild(para);
    });
}

function sorted(m){ // Create a copy, and sort that by last column
    return m.slice().sort( (a, b)  => a[3] - b[3] );
}

<div class="rightDiv">
    <div id = "pastcalcblock"> 
        <h3> PAST CALCULATIONS </h3>
         <input type = "text" size = "1" id = "text1"/>
         <input type = "text" size = "1" id = "text2"/>
         <input type = "text" size = "1" id = "text3"/>
         <input type = "text" size = "1" id = "text4"/><br>
         <input type = "button" value = "Ok" id = "operation" onClick = "addExpression()"/>
         <div id = "resultTab">
            SORT<br>
            <input type = "button" value = "As Entered" id = "enteredBut" onClick="display(false)">
            <input type = "button" value = "By Result" id = "resultBut" onClick = "display(true)"><br><br>
            <div id="expressions">
            </div>         
        </div>
    </div>
</div>

如何按升序对多维数组输出进行排序？

1 个答案: