테이블 정렬(오름/내림) + 테이블체크박스(ALL)

이사람 출처인데 내공 장난아니네 자세함!

http://forest71.tistory.com/129

# 테이블 정렬

일단 이사람의 정렬은 교육용 목적이라 순수 자바스크립트코드이며 

이런 테이블 정렬 기능은 외부 라이브러리에 많다네

var sortType = 'asc';        // 정렬타입을 토글

window.onload = function() {

    // 임의의 데이터 넣기

    var data = [            

        ['Gu', 80, 70, 30],

        ['Brad', 50, 90, 90],

        ['Lee', 70, 70, 70],

        ['Kim', 90, 60, 80]

    ];

    var id = document.getElementById("mainTable_tbody");

    createTableBody(id, data);    // 테이블 바디 만드는 함수 

}

// 테이블 바디 만드는 함수

function createTableBody(target, data) {

    for (var i = 0; i < data.length; i++) {

        var tr = document.createElement('tr');

        target.appendChild(tr);

        for (var j = 0; j < data[i].length; j++) {

            var td = document.createElement('td');

            tr.appendChild(td);

            td.innerHTML = data[i][j];

        }

    }

}

// 테이블 헤더 클릭시 정렬 

function sortContent(index) {

    var table = document.getElementsByTagName('table');

    sortType = (sortType =='asc')?'desc' : 'asc';

    var checkSort = true;

    var rows = table[0].rows;

    while (checkSort) { // 현재와 다음만 비교하기때문에 위치변경되면 다시 정렬해준다.

        checkSort = false;

        for (var i = 1; i < (rows.length - 1); i++) {

            var fCell = rows[i].cells[index].innerHTML.toUpperCase();

            var sCell = rows[i + 1].cells[index].innerHTML.toUpperCase();

            var row = rows[i];

            // 오름차순<->내림차순 ( 이부분이 이해 잘안됬는데 오름차순이면 >, 내림차순이면 <

            //                        이고 if문의 내용은 동일하다 )

            if ( (sortType == 'asc' && fCell > sCell) || 

                    (sortType == 'desc' && fCell < sCell) ) {

                row.parentNode.insertBefore(row.nextSibling, row);

                checkSort = true;

            }

        }

    }

}

    <div id="mainTable">

        <table>

            <thead>

                <tr>

                    <th onclick=sortContent(0)>번호</th>

                    <th onclick=sortContent(1)>제목</th>

                    <th onclick=sortContent(2)>작성일</th>

                    <th onclick=sortContent(3)>조회수</th>

                </tr>

            </thead>

            <tbody id="mainTable_tbody">

            </tbody>

        </table>

    </div>

자 이제 위에것을 jQuery로 변환하자

var sortType = 'asc';

$(document).ready(function(){

    var data = [

        ['Gu', 80, 70, 30],

        ['Brad', 50, 90, 90],

        ['Lee', 70, 70, 70],

        ['Kim', 90, 60, 80]

    ];

    createBody(data, "mainTable_tbody");

});

function createBody(data, id) {

    var $target = $('#' + id);

    var len = data.length;

    $.each(data, function(i, value) {

        var $tr = $('<tr>');

        for (var i = 0; i < value.length; i++) {

            var $td = $('<td>');

            $td.html(value[i]);

            $tr.append($td);

        }

        $target.append($tr);

    })

}

function sortContent(index) {

    sortType = (sortType == 'asc') ? 'desc' : 'asc';

    var checkSort = true;

    //var $target = $('#mainTable_tbody > tr');

    var $target = $('#mainTable_tbody').find('tr')

    while (checkSort) {

        checkSort = false;

        $target.each(function(i, row) {

            if (row.nextSibling == null) return;

            var fCell = row.cells[index].innerHTML.toUpperCase();

            var sCell = row.nextSibling.cells[index].innerHTML.toUpperCase();

            if (sortType == 'asc' && fCell > sCell) {

                $(row.nextSibling).insertBefore($(row));

                checkSort = true;

            }

            if (sortType == 'desc' && fCell < sCell) {

                $(row.nextSibling).insertBefore($(row));

                checkSort = true;

            }

        });

    }

}

<div id="mainTable">

    <table>

        <thead>

            <tr>

                <th onclick=sortContent(0)>번호</th>

                <th onclick=sortContent(1)>제목</th>

                <th onclick=sortContent(2)>작성일</th>

                <th onclick=sortContent(3)>조회수</th>

            </tr>

        </thead>

        <tbody id="mainTable_tbody">

        </tbody>

    </table>

</div>

# 테이블 체크박스 ( ALL )

function allCheck(obj){

    var chk = $(obj).is(":checked"); // 체크여부

    var $inp = $('#mainTable_tbody').find('input#checkValue');

    $inp.each(function(i,v){

         $(v).prop('checked', chk);

    });

}

<div id="mainTable">

    <table>

        <thead>

            <tr>

                <th><input type="checkbox" onchange="allCheck(this)"></th>

                <th onclick=sortContent(0)>번호</th>

                <th onclick=sortContent(1)>제목</th>

                <th onclick=sortContent(2)>작성일</th>

                <th onclick=sortContent(3)>조회수</th>

            </tr>

        </thead>

        <tbody id="mainTable_tbody">

        </tbody>

    </table>

</div>