Skip to content
On this page

제이쿼리 테이블 컨트롤하기

소스코드 :

js
$('#btn_add').on('click',function () {
    let cnt = $('#tbl_price tbody tr').length;
    let max = 5;
    if(cnt < max) {
        var lastItemNo = $("#tbl_price > tbody > tr:last").attr("class").replace("item", "");
        console.log(lastItemNo);
        var newitem = $("#tbl_price > tbody > tr:last").clone();
        newitem.removeClass();
        newitem.find("td:eq(0)").attr("rowspan", "1");
        newitem.addClass("item"+(parseInt(lastItemNo)+1));
        $("#tbl_price").append(newitem);
    }else {
        alert("최대 "+max+"개까지만 가능합니다.");
        return false;
    }
});

응용한 소스코드1

js
$('#btn_add').on('click',function () {
    let cnt = $('#tbl_price tbody tr').length;
    let max = 5;
    if(cnt < max) {
        let lastItemNo = $("#tbl_price > tbody > tr:last").attr("class").replace(/[^0-9]/g, "");
        let newitem = $("#tbl_price > tbody > tr:last").clone();
         $("#tbl_price").append(newitem);
        lastItemNo++
        $("#tbl_price tbody tr").last().attr("class","item"+parseInt(lastItemNo));
        $('.item'+lastItemNo).find('select:first-child').val('');
        $('.item'+lastItemNo).find('input[type=text]').val('0');
        $('.item'+lastItemNo).find('input[type=checkbox]').attr('checked',false);
    }else {
        alert("최대 "+max+"개까지만 가능합니다.");
        return false;
    }
});

테이블 병합 rowspan 응용 소스

js
$(document).on('click','#btn_add',function () {
    let cnt = $('#tbl_form > tbody > tr.extra_tr').length;
    let max = 10;
    let add_cnt = $('.extra_tr').length;
 
    if(max > add_cnt) {
        cnt++;
        add_cnt ++;
        $('#extra_field').attr('rowspan',cnt);
             
        let newitem = `
            <tr class="extra_tr">
                <td>
                    <input type="text" name="cs_${add_cnt}[]" value="" class="frm_input" size="100" maxlength="255">
                </td>
            </tr>
            `;
        $("#tbl_form tbody tr:last").after(newitem);
    }else {
        alert("최대 "+max+"개까지만 가능합니다.");
        return false;
    }
});

참고 자료 :

https://stove99.tistory.com/93

https://baessi.tistory.com/109