캔버스 게임에서 테이블을 정렬 하시겠습니까?

Question

그래서 친구와 나는 자바 스크립트로 다트 게임을 프로그래밍하고 최고 기록을 제출하는 표를 만들었습니다. 제출하는 것이 더 많거나 적지 만 유일한 문제는 점의 양에 따라 표를 정렬하는 방법을 알 수 없다는 것입니다.

이

function submitScore() { 
    var table = document.getElementById("scoreTable"); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    cell1.innerHTML = document.getElementById("nameInput").value; 
    cell2.innerHTML = points; 
    cell3.innerHTML = nameofLevel; 

    document.getElementById("scoresTitle").style.visibility="visible"; 
    document.getElementById("submitButton").style.visibility="hidden"; 
    document.getElementById("nameText").style.visibility="hidden"; 
} 

사람이 포인트로 항상 업데이트 된 테이블을 정렬하는 방법에 대한 아이디어가 있습니까 :

다음은 제출에 대한 코드입니까?

Answer 1

가장 좋은 방법은 메모리의 데이터를 정렬하고 그 변경 사항을 반영하기 위해 새 테이블을 만드는 것입니다.

먼저 점수와 관련된 주가 많은 것으로 보입니다.

function Player(name) { 
    this.name = name; 
    this.score = 0; 
} 
Player.prototype.addScore = function(turnScore) { 
    this.score += turnScore; 
}; 

function ScoreBoard(tallys) { 
    // Allow a default of an empty array. 
    // Also allow a predefined array. Used for immutability later on. 
    this.scoreTallys_ = tallys || []; 
} 
ScoreBoard.prototype.addTurn = function(player, turnScore, nameOfLevel) { 
    this.scoreTallys_.push({ 
    player:  player, 
    points:  turnScore, 
    nameOfLevel: nameOfLevel 
    }); 
    player.addScore(turnScore); 
}; 

Player와

하고 필요에 따라 ScoreBoard 객체 우리가 자신의 역할을 확장 할 수 있습니다 :이 점수 데이터를 관리하는 유한 상태 기계를 만들 수있는 기회를 제공합니다.

ScoreBoard.prototype.sort = function() { 
    function sorter(a,b) { 
    return b.points - a.points; 
    } 
    // This creates a new array (clone) but the objects are not copied only the 
    // references to them. Then we sort them according the the above sorter function. 
    var scores = this.scoreTallys_ 
    .slice(0) 
    .sort(sorter); 
    // Return a new ScoreBoard. Immutability is an advantage in design like this. 
    return new ScoreBoard(scores); 
}; 

지금 우리가 만들고 중 일반 테이블을 렌더링 할 수 있습니다

ScoreBoard.prototype.buildTBody = function() { 
    var rowsHtml = this.scoreTallys_.map(function(tally) { 
    return '<tr><td>' + tally.player.name + 
     '</td><td>' + tally.points + 
     '</td><td>' + tally.nameOfLevel + 
     '</td></tr>'; 
    }).join(''); 
    return '<tbody>' + rowsHtml + '</tbody>'; 
}; 
ScoreBoard.prototype.render = function() { 
    var table = document.getElementById('score-board'); 
    table.innerHTML = this.buildTBody(); 
}; 

우리가 여기에 정렬 방법을 추가하자 : 예를 들어 점수 판은 점수의 HTML 테이블 표현을 만들 책임이 있습니다 또는 정렬 됨 :

myScoreBoard.render();  // Render in order of points as they were added. 
myScoreBoard.sort().render(); // Render in order of points. 

참조 용 : this jsbin은이 구현의 가능한 버전입니다.

Answer 2

현재 구현에서는 데이터가 테이블 자체를 제외하고는 아무 곳에도 저장되지 않기 때문에 포인트별로 정렬하기가 어렵습니다. 이 때문에 단순히 표를 지우고 자식 행에 대한 새 HTML을 생성 할 수 없습니다. 앞으로는 개체의 배열에 점을 저장하는 것이 좋습니다. 이러한 '데이터를 표현으로부터 분리'하는 것은 많은 이점을 가지고 있습니다. 그렇게하기위한 추가 문서는 인터넷에서 쉽게 얻을 수 있습니다.

테이블 업데이트를 마친 직후에 다음 코드를 호출 해보십시오.

function sortByPoints(){ 
    var theTable = document.getElementById("scoreTable") 
    var tableHead = table.getElementsByTagName('thead')[0] || theTable; 
    var rows = theTable.getElementsByTagName('tr'); 
    //rows is not an Array, but an HTMLCollection. Convert HTMLCollection into Array in the following line. 
    rows = Array.prototype.slice.call(rows); 

    var sortedRows = rows.sort(function(a,b){ 
     var pointsInA = a.getElementsByTagName('td')[1]; 
     var pointsInB = b.getElementsByTagName('td')[1]; 

     //sort in descending order 
     if (pointsInA > pointsInB) return -1; 
     if (pointsInA < pointsInB) return 1; 
     return 0; 
    }); 

    sortedRows.forEach(function(a){ 
     tableHead.appendChild(a); 
    } 
}