Search...
제이쿼리 테이블 컨트롤하기
소스코드 :
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;
}
});