숫자데이터로 이루어진 테이블에 총 합계 구하는 Row추가하기

2월 3월 4월 5월
기술부 1 2 3 4
영업부 2 3 4 5
인사부 3 4 5 6
Total 6 9 12 15

위와 같은 테이블에서 Total만 뺀채 테이블을 만들었다면 그 아래의 Javascript 소스를 이용해 Row를 추가할 수 있다

function AddTotalRow() {
    var table = document.getElementById('tblReport');
    var trCount = table.rows.length;
    var tdCount = table.rows[0].cells.length;

    // 배열로 DataSet 구성
    var arrTotal = new Array(tdCount);
    arrTotal[0] = "Total";
    for (i = 1; i < tdCount; i++) arrTotal[i] = 0;

    for (i = 1; i < trCount; i++) {     // 첫번째 Row는 Header
        for (j = 1; j < tdCount; j++) { // 첫번째 Cell도 Header
            var anchor = table.rows[i].cells[j].innerHTML.substring(1);
            var endIndex = anchor.indexOf('>');
            var restartIndex = anchor.indexOf('<');
            var value = anchor.substring(endIndex+1, restartIndex);

            arrTotal[j] += parseInt(value);
        }
    }

    // table에 row 추가
    var newRow = table.insertRow();
    for (i = 0; i < arrTotal.length; i++) {
        var newCell = newRow.insertCell();
        newCell.innerHTML = arrTotal[i];
        newCell.style.textAlign='center';
    }
}

http://koxo.com/lang/js/object/table.html
http://koxo.com/lang/js/method/substring.html
http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/insertRowExample.htm
http://www.java2s.com/Code/JavaScript/Language-Basics/Stringsubstrandsubstringreturnsaspecifiedpartofastring.htm
http://www.w3schools.com/JS/js_obj_array.asp
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_indexof
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_join

Advertisements
%d bloggers like this: