동적 html 태그 컨트롤 찾기

정적인 테이블이 아닌 동적으로 움직이는 테이블을 그릴 때 Ajax통신을 히용해서 Json 구조로 된 데이터를 가져와 Jquery를 이용하여 특정 테이블에 그려준다.

이렇게 테이블을 그릴 때 hidden 태그를 이용하여 해당하는 정보의 키값을 숨겨놓고 조회 화면으로 넘길 때, 혹은 수정화면으로 넘길 때 또는 해당 정보에 각종 이벤트를 발생 시킬 때 생성한  hidden의 값을 이용합니다.


하여 오늘은 동적 html 태그 컨트롤 찾기에 대해서 알아볼까 합니다.
먼저 밑에와 같이 html body 안에 동적으로 그려줄 테이블을 만듭니다.
<table>
<tr>
<td>제목</td>
<td>내용</td>
</tr>
<tbody id="tableTody">
</tbody>
</table>
테이블의 tbody에 동적인 정보들이 그려질 것이므로 id를 부여 합니다. 저는 "tableTody"로 id를 부여 했습니다.

다음으로는 DB에서 정보를 가져와 tableTody에 DB 정보를 그려주는 자바스크립트를 아래와 같이 만들어줍니다.
function getNoticeList()
     {
if (validation() == false) return;

         var jsonObj = {};
   // 조건 생성
         jsonObj.city = $.trim(frmPopUp.city.value);
         jsonObj.town = $.trim(frmPopUp.town.value);

         $.ajax(
         {
             type       : "POST",
             url        : "${pageContext.request.contextPath}/select/Notice.getNoticeList/action.do",
             dataType   : "json",
             data       : {"param" : JSON.stringify(jsonObj)},
             async      : false,
             beforeSend : function(xhr)
             {
                 // 전송 전 Code
             },
             success    : function(result)
             {
                 $("#tableTody").empty().append("");

                 for (var i=0; i<result.length; i++)
                 {
                     var htmlString = "";
                     htmlString += "<tr>";

// 제목
htmlString += "<td class='text_left'><input type='hidden' name='hNoticeID'"+i+" value='"+result[i].id+"'>" + result[i].title + "</td>";
                     htmlString += "<td class='text_left'>" + result[i].title + "</td>";

                     // 내용
                     htmlString += "<td class='text_left'>" + result[i].contents + "</td>";


                     $("#tableTody").append(htmlString);
                 }
             },
             error      : function(xhr)
             {
                 // Error 발생 Code
                 alert(xhr.responseText);
             }
         });
     }


저는 간단하게 게시판의 제목과 내용을 불러오는 것을 만들었는데요. 아마 필드에서는 엄청나게 복잡한 테이블이 그려질거에요...;;;

위에서 hidden 태그에 hNoticeID의 name를 가진 숨은 필드를 만들면서 값(게시판 키)을 넣고 있습니다.

이렇게 hNoticeID의 name으로 만들어진 숨은 필드들을 모두 조회하고 싶다면 아래와 같은 자바스크립트 함수를 이용하면 됩니다.

var h  =$("input[name^='hNoticeID']");
for(var i = 0; i < h.length; i++){
alert(h[i].value);
}

위의 스크립트에서 ^요것 때문에 hNoticeID의 name를 가진 모든 컨트롤을 찾을 수 있는 것입니다.

또한 위의 내용들을 이용하면 특정 row의 게시판 키 값도 알수있겠지요...ㅎ
혹시 궁금해 하시는 분들을 위해서 링크를 남겨 놓겠습니다...ㅎ
<== 테이블 tr 삭제 하기 (table row delete) ==>



여기까지 동적 html 태그 컨트롤 찾기 포스팅이었습니다.
조금이라도 도움이 되는 정보였다면 좋겠네요...ㅎ
오늘도 좋은 하루 되세요~~~^^