테이블 해당 열 값 가져오기 행 값 가져오기

보통 행 값을 가져오는 경우는 그 행을 클릭 하여 tr값을 불러오거나 셀렉트박스에서 체크된 값을 부르는 경우가 많다. 

해당 열 클릭시 그 tr을 통해cname으로 접근하여 값을 얻을 수 있다

 $table.on('click', '.msginfo', function() { 

        var $row = $(this).closest( "tr" );

             var seq = $row.find('[cname=seq]').val(); 

             var validator = $('#info_msg_form').validate();

             var pdata = {

                      "seq" : seq,

                  };

     /* 발송 대상 선택 클릭시 */

               

  $('#btn_addCustomer').click(function(){    

          var validator = $('#add_cus_form').validate();        

          validator.resetForm();

          // 왜 이런게 필요한지 ??/

/*           var client = $('#client').val();

          $('#client').val(client);

           */

           

          $('#add_cus_form')[0].reset();

          $('#addCustomerModal').modal({

              backdrop: 'static',

              keyboard: false

          });

       

          client_check();

          

          getCodeList();

         

          

    }); 

               

         var count = 0;

         function client_check(){

$("input[name=check_all]").click(function(){

var chk = $(this).is(":checked");

if(chk){

$("input[name='clinet_seq']").prop("checked",true);

count = $("input[name='clinet_seq']:checked").length;

}else{

$("input[name='clinet_seq']").prop("checked",false);

count = $("input[name='clinet_seq']:checked").length;

}

$('#client_count').val(count);

});

         $("input[name=clinet_seq]").click(function(){

         

      var chk = $(this).is(":checked");

      count = $("input:checkbox[name=clinet_seq]:checked").length;

$('#client_count').val(count);

     

         });

         

         };

               

체크된 값 리스트에 담아 다른 곳에 넣기

  $('#btn_regiseter').click(function(){

          

  var count=0; 

  var clientList="";

   $('input:checkbox[name="clinet_seq"]').each(function() {

      if($(this).is(':checked'))

        {      

      var $row = $(this).closest( "tr" );

          clientList+= $row.find('[cname=phone_tel]').text() + ";";

          count++;

        }

       });

     

  clientList = clientList.replace(/-/g,""); 

  clientList = clientList.substring(0,clientList.length - 1);  // 맨 마지막 ;를 제외 함

  

 

         

                  var msg = '선택 하시겠겠습니까 ?';

                  confirmMsg(msg);

                  $('#confirmModal').off('click','.btn-ok');

                  $('#confirmModal').on('click', '.btn-ok', function(e) {

                      $('#confirmModal').modal('hide')

                      $('#phone_cnt').val(count); 

                      $('#cid_list').val(clientList);

                      $('#addCustomerModal').modal('hide')

                  });

      });  

추가

기초적인 traversing

$("selector").eq("index")

지정된 인덱스로 일치하는 엘리먼트들의 집합을 줄인다

$("selector").find("childSelector")

셀렉터에의해 필터링된 객체 또는 엘리먼트와 일치하는 요소의 자식엘리먼트 얻기

$("selector").parent()

셀렉터에의해 필터링된 영역으로부터의 부모노드를 가져오기

$("selector").prev()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 이전형제노드 가져오기

$("selector").next()

셀렉터에의해 필터링된 영역에 있는 엘리먼트의 다음형제노드 가져오기

출처: http://musicholic80.tistory.com/entry/table의-row-선택하여-data가져오기 [음악중독자]

자주쓰는 유용한 팁

1. 커서 변경

$('body').css('cursor', 'default');

$('body').css('cursor', 'wait');

2. Select Box에서 선택된 Value 찾기

$('#search_sale_pernr_s option:selected').val();

3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기

$("#data_list_table > tbody").children("tr:not(:first)").remove();

4. Table의 마지막 Row 다음에 Row 추가하기

$("#data_list_table > tbody:last").append("<tr><td>값1</td></tr>");

5. innerHTML값 Setting하기

$("#id_total_price").html("<strong>값</strong>");

6. 해당 ID로 지정된 HTML 보이기/숨기기

$("#placeholder").show();

$("#placeholder").hide();

7. ID로 지정된 Form Submit 하기

$("#csf_tab_menu_form").attr("target", "_top");

$("#csf_tab_menu_form").attr("action", "/sabisung/list.jsp");

$("#csf_tab_menu_form").submit();

8. Select Box의 Option 값 확인

$("#search_sale_unit").find("option").each(function() {

alert(this.value);

});

9. Select Box의 특정 값을 가지는 Option 삭제하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "4") {

//alert(this.selected);

$(this).remove();

}

});

10. Select Box의 특정 값 이후/이전에 Option 추가하기

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

$(this).after("<option value=\"4\">텍스트</option>");

//$(this).before("<option value=\"4\">텍스트</option>");

return false;

}

});

11. each Loop에서의 break/continue 방법

$("#csf_menu_no").find("option").each(function() {

if(this.value == "3") {

return false; //break 의미

return true; //continue 의미

}

});

12. Select Box의 모든 Option 삭제 후 Default Option 추가하기

$("#search_sale_pernr_s").find("option").remove().end().append("<option value=\"\">::사원 선택::</option>");

13. checkbox의 전체 갯수와 선택된 갯수 구하기

- 전체 갯수 : $("input:checkbox[name=is_check]").length

- 선택된 갯수 : $("input:checkbox[name=is_check]:checked").length

- 전체 checkbox 순회하기

$("input:checkbox[name=is_check]").each(function() {

this.checked = true;

});

14. checkbox의 체크 여부 확인

if($("input:checkbox[name=complete_yn]").is(":checked")) == true) {

; //작업

}

15. Table의 특정(ID를 가지는) TR 다음에 TR Row를 추가하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).after("<tr><td>사비성</td></tr>");
return false;
}
});

16. Table의 특정(ID를 가지는) TR Row를 삭제하기

$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).remove();

return false;
}
});

17. 숫자인지 체크

function is_number(v) {
var reg = /^(\s|\d)+$/;
return reg.test(v);
}

18. 숫자인지 체크 (-/+ 부호까지 체크)

function is_number(v) {
var reg = /^[-+]?\d+$/;
return reg.test(v);
}

19. 소수점 자리수에 맞는 숫자인지 체크 (소수점 2자리까지 체크)

function is_float_2(v) {
var reg = /^[-+]?\d+.?\d?\d?$/;
return reg.test(v);
}

20. 숫자에 콤마 추가하기 (금액단위)

function set_comma(n) {
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n))
n = n.replace(reg, '$1' + ',' + '$2');

return n;
}

출처: http://pet2r.tistory.com/entry/jQuery-자주-쓰이는-유용한-팁 [Pet2r]

특정 행 값 찾기