[JS] tr 로우 선택 데이터뽑기

[JS] tr 로우 선택 데이터뽑기

게시판 등 을 진행 할때 상세보기 혹은 삭제 수정 시에 

체크박스 선택후 버튼 클릭 방식도 있지만

여러 데이터중 하나의 데이터를 뽑는 방법중 row선택 방법이있다.

가장 편리할뿐더러 자주 애용하는 방법인데 

다음 예제를 보기 바란다 (주요문구 주석처리)

▼tr 로우 선택 데이터

 
 
 
$(window).load(function () {
 
        //시작
           S_Row();
            
     });
 
    //선택데이터
    function S_Row() {
        $("#a_chk").unbind('click');
        $("#a_chk").click(function () {
            var allbox = $(this).attr("checked");
            if (allbox == true) {
                $('table#table_name tr td input:checkbox').each(function () {
                    $(this).attr("checked", "checked");
                });
            } else {
                $('table#table_name tr td input:checkbox').each(function () {
                    $(this).attr("checked", "");
                });
            }
        });
 
    // tr 로우 
    var rows = $("table#table_name tr");
    
    // 로우 산ㄱ
    if (rows && rows.length > 0) {
        $(rows).each(function (idx) {
            if (idx > 0) {
 
                var startIdx = 1;
                var endIdx = rows[idx].childNodes.length;
                //시작점과 끝점을 for 문으로 돌려서 선택된 row
                for (i = startIdx; i <= endIdx; i++) {
                    //$(rows[idx].childNodes[i]).click(function () {
                    $(rows[idx]).find('td').eq(i).unbind('click');
                    $(rows[idx]).find('td').eq(i).click(function () {
                        
                        // 선택된 로우의 값 호출
                        var ID = $(rows[idx]).find('td').eq(0).children('input[type="checkbox"]').val();          //GUID
                        alert("checkbox value : " + ID);
                        //ID 값을 넘겨서 ViewPage를 호출한다.
                    });
                }
 
                //마우스오버 시에 색표현
                $(this).mouseover(function () {
                    
                    //$(rows[idx]).addClass('mouseovercolor').attr('style', 'cursor:pointer;cursor: hand;'); class로 주려면
                    //로우색 변환 color 변경 
                    $(rows[idx]).attr('style', 'cursor:pointer; cursor: hand;background-color:#f8f8f8;');
 
                });
                    
                //마우스 아웃
                $(this).mouseout(function () {
                    //로우색 복귀
                    $(rows[idx]).css('background-color', '').attr('style', '');
                });
            }
 
 
        });
        }
}
 
}
 

    p.sㅇp  해당 자료는 과거 검색 후 나온 자료를 커마한 자료로 유사한 자료가 있을수도있습니다.