JQUERY 동적 테이블 다루기.

회사일 관련하여 개인 프로젝트 진행하는데 있어서 테이블을 동적으로 다루어야 되는 부분이 있어서 작성하였다.

그런데 동적으로 가로 행 TR 추가는 참고 사이트가 많이 있는데 이상하게 세로 열 TD 추가는 없어서 블로그 작성 하였다.

아래는 해당 페이지의 전체 코드.

최초에 테이블이 없는경우 입력받은 값으로 동적으로 생성 후 행과 열을 컨트롤박스에서 클릭하여 추가/삭제를 한다.

코드 자체는 크게 어렵지 않으니 보고 참고하면 될 듯.

<div class="row">
    <div class="col-sm-12">
        <div class="panel colourable">
            <div class="panel-heading">
                <span class="panel-title">IDC 2D Map</span>
            </div>
            <div class="panel-body">
                <div class="init-table">
                    <span>Make Map</span>
                    <input type="text" id="mRow" placeholder="가로 행">
                    <input type="text" id="mCol" placeholder="세로 열">
                    <button type="submit" class="tc-btn btn btn-default">Create</button>
                </div>
                <div class="control-box" style="display: none;">
                    <span class="btn mRow-add">가로 행 추가 <i class="fa fa-plus"></i></span>
                    <span class="btn mRow-del">가로 행 제거 <i class="fa fa-minus"></i></span>
                    <span class="btn mCol-add">세로 열 추가 <i class="fa fa-plus"></i></span>
                    <span class="btn mCol-del">세로 열 제거 <i class="fa fa-minus"></i></span>
                </div>
                <div class="show-map text-center" style="padding-top: 15px;"><span>Not exist map. first, create map.</span></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    init.push(function () {
        var tstart = "<table class='bordered idcMap' style='margin: auto;'><tbody>";
        var tend = "</tbody></table>"
        var tcontent = "";
        function makeTable() {
            var nrow = $("#mRow").val();
            var ncol = $("#mCol").val();
            for(var i=0; i<ncol; i++) {
                tcontent += "<tr class='bordered' style='height: 100px;'>";
                for(var j=0; j<nrow; j++) {
                    tcontent += "<td class='bordered' style='width: 100px;'></td>";
                }
                tcontent += "</tr>"
            }
            $(".show-map").html(tstart+tcontent+tend);
            $(".init-table").hide();
            $(".control-box").show();
        }
        $(".tc-btn").click(function() {
            makeTable();
        });
        $(".mRow-add").click(function() {
            var tRow = $('.idcMap > tbody > tr:last').clone();
            $('.idcMap > tbody:last').append(tRow);
        });
        $(".mRow-del").click(function() {
            $('.idcMap > tbody > tr:last').remove();
        });
        $(".mCol-add").click(function() {
            var trlength = $('.idcMap > tbody > tr').length;
            for(var i=0; i<trlength; i++) {
                var t = $('.idcMap > tbody > tr').eq(i);
                t.append('<td class="bordered" style="width: 100px;"></td>')
            }
        });
        $(".mCol-del").click(function() {
            var trlength = $('.idcMap > tbody > tr').length;
            for(var i=0; i<trlength; i++) {
                var t = $('.idcMap > tbody > tr').eq(i);
                t.children().last().remove();
            }
        });
    })
</script>