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

Question

当点击OK时，我的代码会生成一个二维矩阵。代码将数据存储在多维数组中，但我试图向代码中添加一个排序函数，该代码使用第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>