tr 동적 추가, 순서 이동, 선택삭제, 번호 넘버링

여기저기 참고해서 만듬 

 

		function numbering(){
			var cnt = 1;
			$('#tb_dtl tr td:first-child').each(function() {
				$(this).children().val(cnt++);
			});
		}
		function add_tr(DTL_JOB,DTL_JOB_EXPLN,FCLT,HRMFL_FCTR){
			var cnt = $("#tb_cnt").val();
			cnt++;
			var str = "";
			str +='<tr id="tr'+cnt+'">';
			str +='	<td align="center" class="td01"><input type="text" style="border:0px" readOnly align="center" name="ORDER'+cnt+'" value=""></td>';
			str +='	<td><input type="text" name="DTL_JOB'+cnt+'" value="'+DTL_JOB+'"></td>';
			str +='	<td><input type="text" name="DTL_JOB_EXPLN'+cnt+'" value="'+DTL_JOB_EXPLN+'"></td>';
			str +='	<td><input type="text" name="FCLT'+cnt+'" value="'+FCLT+'"></td>';
			str +='	<td><input type="text" name="HRMFL_FCTR'+cnt+'" value="'+HRMFL_FCTR+'"></td>';
			str +='	<td align="center">';
			str +='		<button class="btn_" type="button" onclick="moveUp(this)"><i class="fas fa-angle-up"></i></button>';
			str +='		<button class="btn_" type="button" onclick="moveDown(this)"><i class="fas fa-angle-down"></i></button>';
			str +='	</td>';
			str +='	<td align="center"><input type="checkbox" name="delchk" value="'+cnt+'"></td>';
			str +='</tr>';
			$("#tb_dtl > tbody:last").append(str);
			$("#tb_cnt").val(cnt);
			numbering();
		}
		function del_tr(){
			$("input[name=delchk]:checked").each(function() {
                var tr = $(this).parent().parent();
				$(tr).remove();
			});
			numbering();
		}
		function moveUp(el){
			var $tr = $(el).parent().parent(); 
			$tr.prev().before($tr);
			numbering();
		}

		function moveDown(el){
			var $tr = $(el).parent().parent();
			$tr.next().after($tr);
			numbering();
		}

 

테비블 아이디는 tb_dtl 이고 

 

카운트값은 따로 두었다

 

<input type="hidden" value="0" id="tb_cnt">