테이블과 같은 항목 순서를 변경합니다

Question

축구 테이블을 표시하기 위해 DIVS 테이블과 같은 세트 (행과 Cols)가 있습니다. 이제 페이지를 새로 고치거나 AJAX 사용을 피하지 않고 선택한 키에 따라 해당 테이블을 주문할 수 있어야합니다.

보다 구체적이기 때문에 선택한 키를 반영하고 테이블을 다시 주문하는 각 "columm"내부의 값을 잡아야합니다.

jQuery를 사용하므로 작업은 상당히 쉬워야합니다. 팀의 ID와 원인의 열을 다시 주문하는 방법은 확실하지 않습니다. 그건 그렇고 테이블 값은 모두 숫자입니다.

아래는 마크 업 (행)의 예입니다.

<div class="rb">
        <div class="cname">Benfica</div>
        <div class="tdr bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>
        <div class="tdg bold">0</div>

        <div class="tdg bold">0</div>
        <div class="tdg bold" style="margin-left: 5px;">0</div>
        <div class="tdg bold">0</div>
        <div class="tdr bold">0</div>
</div>

이견있는 사람?

Answer 1

모든 객체가 테이블 행에 해당하는 객체 배열이 있고 모든 객체에는 테이블 열에 해당하는 속성이 있습니다.

var table = [
   { rowId: 1, teamName: 'Man U', country: 'England' },
   { rowId: 2, teamName: 'FC Barcelona', country: 'Spain' }
];

이제 데이터를 이렇게 정렬 한 경우 말할 수있는 기능을 만들 수 있습니다. drawTable(table) 그리고 그것은 당신이 원하는 HTML 마크 업을 만들 것입니다. 그런 다음 다음과 같이 해당 변수를 정렬 할 수 있습니다.

function sortTable(table, column) {
    table.sort(function(x,y) { return x[column] > y[column]; });
    return table;
}

$('#sortByTeamName').click(function() {
   table = sortTable(table, 'teamName');
   drawTable(table);
});