jQuery n 번째 자식 선택기를 사용하여 HTML의 특정 테이블에서 특정 다중 열을 전환하는 방법은 무엇입니까?

Question

여러 페이지를 표시하는 웹 페이지가 있습니다. 하나의 특정 테이블에 대한 일부 열의 가시성을 토글하고 싶습니다. 사용 시작 번호 :

$(document).on("change","#includePaths",function() { 
    $("td:nth-child(3)").toggle(); 
});  

테이블이 하나 뿐인 경우.

두 질문 : 그것은 (<div id="mytable">...</div>에) 하나 개의 테이블을 adresses 있도록

1. 어떻게 위의 코드를 수정하려면?
2. 테이블 헤더의 정규식 일치를 기반으로 여러 열을 토글하도록 위의 코드를 수정하는 방법은 무엇입니까?

Answer 1

나는 당신이 시도 할 수 있다고 생각 :

var regex_to_hide = /cool.*regex/; 

$(document).on("change", "#includePaths", function() { 
    var columnsToHide = new Array(); 

    // I'm assuming #includePaths is the table 
    // If not - replace "this" with the right selector for your table 

    // Test headers to see what we need to hide 
    $("#mytable").find("th").each(function(i, th) { 
     if (regex_to_hide.test($(th).html())) { 
      columnsToHide.push(i); 
     } 
    }); 

    // Hide numbered columns 
    for(i = 0; i < columnsToHide.lenght; i++) { 
    $("#mytable").find("td:nth-child(" + columnsToHide[i] + ")").toggle(); 
    } 
}); 

Answer 2

은이 같은 몇 가지 일을해야 할 수 있음 : http://jsfiddle.net/VjJpe/ 당신은 마크 업을 따라야합니다. 하나의 테이블 구조 만 제공했지만 동일한 마크 업은 다중 테이블로도 작업을 수행합니다.

<table border="1" class="toggling_table"> 
    <th class="catcher" data-togglerid="1">Click to toggle</th> 
    <th>No Click</th> 
    <th class="catcher" data-togglerid="3">Click to toggle</th> 
    <tr> 
    <td class="toggler_1" >it will toggle</td> 
    <td >it will not toggle</td> 
    <td class="toggler_3">it will toggle</td> 
    </tr> 
    <tr> 
    <td class="toggler_1" >it will toggle</td> 
    <td >it will not toggle</td> 
    <td class="toggler_3">it will toggle</td> 
    </tr> 
    <tr> 
    <td class="toggler_1" >it will toggle</td> 
    <td >it will not toggle</td> 
    <td class="toggler_3">it will toggle</td> 
    </tr> 
    </table> 
    <script type="text/javascript"> 
    $(function(){ 
    $(".toggling_table").on("click", ".catcher", function(){ 
    var id = $(this).data("togglerid"); 
    alert(id); 
    $(".toggler_"+id).toggle(); 
    }); 
    }); 
    </script>