javascript 동적 테이블 만들기, 행추가 insertRow 동적테이블 행 데이터 접근 json만들기

javascript 동적 테이블 만들기, 행추가 insertRow 동적테이블 행 데이터 접근 json만들기

 

javascript를 이용해 동적으로 테이블을 만들어 보자.

예를 들어 버튼을 클릭하면 행을 추가 해서 그 행을 저장한다고 가정하자.

아래와 같은 테이블이 있다.

 

<table class="resch_list">
    <colgroup>
        <col />
        <col width="10%"/>
    </colgroup>
    <thead>
        <tr>
            <th>서비스</th>
            <th>필수여부</th>
        </tr>
    </thead>
    <tbody id="serviceTbody">

</tbody>

</table>

 

<button type="button" onclick="javascript:addRow()" class="gray">행추가</button>

 

 

 

이제 저 '행추가' 버튼을 클릭했을 때 테이블에 동적으로 행을 추가 해보자.

버튼을 클릭해 addRow() 함수를 실행한다.

 

<script>
function addRow(){
 
   mytable = document.getElementById('serviceTbody');  //행을 추가할 테이블
   row = mytable.insertRow(mytable.rows.length);  //추가할 행

   
   cell1 = row.insertCell(0);  //실제 행 추가 여기서의 숫자는 컬럼 수
   cell2 = row.insertCell(1);

   cell1.innerHTML = "<td class='al fontB'><input type='text' name='title' size='80'></td>"; //추가한 행에 원하는  요소추가
   cell2.innerHTML = "<td><input type='checkbox' name='service'/></td>";
}

</script>

 

id 로 해당 테이블의 tbody를 가져와 row.insertCell을 이용해 행을 추가하고

그 행에 원하는 요소를 넣는 방식이다.

 

 

 

행 추가 버튼을 클릭할 때마다 위의 이미지와 같이 행이 추가 된다.

 

그럼 이렇게 동적으로 만들어진 행에 접근하는 방법은 어떻게 할까

입력된 값을 JSON 으로 만드는 방법을 알아보자.

 

var dataArray = new Array();
var title = document.getElementById("title").value;  
 
 
for(var i=0; i<rowCount; i++){
    var row = mytable.rows.item(i);
    var dataObj = new Object();
        for ( var j = 0; j<row.cells.length; j++ ) { 
            var col = row.cells.item(j);   
             if (col.firstChild.getAttribute('type') =="text"){   //텍스트일경우와 체크박스일경우 값을 다르게
                dataObj.question = col.firstChild.value;
            }else{
                dataObj.essential = col.firstChild.checked;  //체크박스의 경우 value값은 체크값이 아니기 때문
            }
        dataObj.title = title;
    }   
    dataArray.push(JSON.stringify(dataObj));   //데이터를 json 형식으로 만들어줌 stringify
}
 
var result = {'"dataList"' :[dataArray]};
var str='';
for(var i in result){
    if(result.hasOwnProperty(i)){
        str += i + ":[" + result[i]+"]";
    }
}
var dataParam = "{"+str+"}";

 

동적으로 추가한 행에 아래와 같이 데이터를 입력하면

 

 

 

인위적으로 만들기는 했지만..

아래와 같은 Json 데이터를 만들었다.

 

{
    "dataList": [
        {
            "question": "첫번째 행",
            "essential": false
        },
        {
            "question": "두번째 행",
            "essential": true
        },
        {
            "question": "세번째 행",
            "essential": true
        },
        {
            "question": "네번째 행",
            "essential": false
        }
    ]
}

json 데이터의 사용법은 아래의 Link를 참조한다.

 

Link : JSONObject JSONArray 에 대한 이해 및 사용법