[자바스크립트] Table rows 2줄 추가 함수.

2013. 9. 2. 17:52ㆍIT/Web-JavaScript



기존에 사용되던 소스를 참고하여 내 입맛에 맞게 수정.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
    function fn_ctmmnyAdd() {
        // create  tr/td
        var targetTable = document.getElementById("personControl");
        
        // 추가 할 수 있는 담당자 제한.
        if(targetTable.rows.length > 10) {
            alert("담당자가 많습니다.");
            return ;
        }
        
        var tbody = targetTable.getElementsByTagName("tbody")[0];
        var newRow = tbody.insertRow();
        var newRow2 = tbody.insertRow();
        
        newRow.onmouseover=function(){targetTable.clickedRowIndex=this.rowIndex};
        newRow2.onmouseover=function(){targetTable.clickedRowIndex=this.rowIndex};
        
    //    alert(targetTable.rows.length);
    
        var newCell_1 = newRow.insertCell(0);
        var newCell_2 = newRow.insertCell(1);
        var newCell_3 = newRow.insertCell(2);
        var newCell_4 = newRow.insertCell(3);
        var newCell_5 = newRow.insertCell(4);
        var newCell_6 = newRow2.insertCell(0);
        var newCell_7 = newRow2.insertCell(1);
        var newCell_8 = newRow2.insertCell(2);
        var newCell_9 = newRow2.insertCell(3);
 
        // style setting
        newCell_1.setAttribute("align", "center");
        
        newCell_1.className = "";    
        newCell_2.className = "";    
        newCell_3.className = "";    
        newCell_4.className = "";    
        newCell_5.className = "last";    
        newCell_6.className = "";    
        newCell_7.className = "";    
        newCell_8.className = "";    
        newCell_9.className = "last";
        
        newCell_1.width        = "15%"; 
        newCell_2.width        = "13%";     
        newCell_3.width        = "29%";              
        newCell_4.width        = "13%"; 
        newCell_5.width        = "30%";
        newCell_6.width        = "13%";     
        newCell_7.width        = "29%";              
        newCell_8.width        = "13%"; 
        newCell_9.width        = "30%";
        
        newCell_1.rowSpan    = "2";
        
        newCell_1.innerHTML = "<img src=\'<c:url value='/images/button/btn_del.gif' />\' class='vertical_M' style='cursor:pointer' onclick='javascript:deleteCtmmnyPerson()'>";
        newCell_2.innerHTML = "<th><spring:message code='projectInformation.ctmmny.businessClassification'/><img src='<c:url value='/images/com/required.gif' />' class='vertical_M' alt='' /></th>";
        newCell_3.innerHTML = "<input type='text' name='bizClassify' class='input' value=''/>";
        newCell_4.innerHTML = "<th><spring:message code='projectInformation.ctmmny.personNm'/><img src='<c:url value='/images/com/required.gif' />' class='vertical_M' alt='' /></th>";
        newCell_5.innerHTML = "<input type='text' name='ctmmnyPersonNm' class='input' value=''/>";
        newCell_6.innerHTML = "<th><spring:message code='projectInformation.ctmmny.deptNm'/><img src='<c:url value='/images/com/required.gif' />' class='vertical_M' alt='' /></th>";
        newCell_7.innerHTML = "<input type='text' name='ctmmnyDeptNm' class='input' value=''/>";
        newCell_8.innerHTML = "<th><spring:message code='projectInformation.ctmmny.contactNo'/><img src='<c:url value='/images/com/required.gif' />' class='vertical_M' alt='' /></th>";
        newCell_9.innerHTML = "<input type='text' id='ctmmnyContactNo' name='ctmmnyContactNo' class='input' value='' maxlength='13' onKeyDown='fn_maskPhone(this);' onKeyUp='fn_maskPhone(this);'/>";
    }
    
    // 담당자 삭제
    function deleteCtmmnyPerson(){ 
        var targetTable = document.getElementById("personControl");
        
        // Row가 2줄씩 증가하기 때문에 삭제시에도 2줄씩 삭제.
        for(var i = 1; i >= 0 ; i--){
            targetTable.deleteRow(personControl.clickedRowIndex+i);
        }
    }    
 
// Row를 추가할 대상 테이블
<table id="personControl" width="100%" border="0" cellspacing="0" cellpadding="0" class="type2" summary="">
 
 

* 체크포인트
   1) innerHtml을 사용하여 테이블 Row추가
   2) targetTable.rows.length 를 통해 최대 rows값 반환하여 추가 한계치 지정
   3) delete할 때는 index가 반환이 되는데.. 왜 insert할 때는 index가 반환이 안되는지?
   4) 참고로 이거는 rowspan = 2 를 통한 double rows의 증가임.

대략적으로 이정도?


저작자표시 비영리 동일조건

'IT > Web-JavaScript' 카테고리의 다른 글

[자바스크립트] IFRAME 객체 컨트롤  (0) 2014.06.26
[자바스크립트] SELECT 박스 선택시 option 안의 텍스트 다른 필드에 출력하기  (0) 2014.06.25
자바스크립트 table.deleteRow()  (0) 2013.11.01
[자바스크립트] new Option() 파라미터 정의  (0) 2013.11.01
[자바스크립트] 전화번호 마스킹을 시도하다.  (0) 2013.08.27

관련글

티스토리툴바