자바 태그의 마지막에 Tr같은 html 추가하기

이번에 테이블 구조 작업하면서 기본 tr에서 새로운 tr을 만드는 작업을 하였다.

 

근데 tr과 tr사이에 다가 작업을 하고 싶은데

 

우리가 보편적으로 알고 있는 html , append로 해보니깐 먼저 만들어지는게 밑으로 도망가는 것이 아닌가?

 

어짜피 근데 이렇게 적어도 님들 소스만 보는거 다암 그냥 각설하고 소스만 보여드릴께여 ㅋㅋ

 

<table>
	<caption></caption>
    <tobody>
    	 <tr class="FileTr1">
         	<th><label for="file1">파일 1</label>
         	</th>
        	<td class="txt">
           		<input type="file" class="file_join" id="file1" name="file1"><span class="spans"></span>
           		<button type="button" onclick="FilePlus(1);">
           			<i class="xi-plus"></i>
           		</button>
        	</td>
         </tr>
        
        <tr class="FileTr2">
        	<th><label for="file2">파일 2</label>
        	</th>
        	<td class="txt">
        		<input type="file" class="file_join" id="file2" name="file1"><span class="spans"></span>
          		<button type="button" onclick="FilePlus(2);">
             	 <i class="xi-plus"></i>
          		</button>
        	</td>
        </tr>
    </tobody>
 </table>
 
<script>

function FilePlus(cnt){
	
	var html = "";
	html += '<tr class="FileTr'+cnt+'">';
	html += '<th class="plustr">추가파일</th>';
 	html += '<td class="txt">';
    html += 	'<input type="file" class="file_join" name="file'+cnt+'"><span class="spans"></span>';
    html += 	'<button type="button" class="plus btn-e-sum1" onclick="FileDelete(this);">';
    html += 	'<i class="xi-minus"></i>';
    html += 	'</button>';
    html += '</td>';
    html += '</tr>';		
	$(".FileTr"+cnt).last().after(html);
}


function FileDelete(obj){
	 var tr = $(obj).parent().parent();
	 
	    tr.remove();
}
</script>

저기 태그에 대한 last명령어를 쓰면 마지막 태그를 찾고 after명령어로 html 값을 작성합니다요

 

 

추가로 태그 지우는것도 만들어놨으니께 편히쓰쇼잉