如何按升序對多維數組輸出進行排序？

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>