PHP에서 버튼을 클릭하면 테이블을 표시하는 방법은 무엇입니까?

Question

mysql 테이블의 파일을 PHP의 웹 페이지에 나열하려고합니다. 이를 위해 테이블을 사용하여 일반보기를 더 많이 사용합니다. 이제 한 페이지에 n 개의 테이블이 있습니다. 이 n은 mysql 질의에 의존한다. 페이지에 파일을 나열 할 수 있습니다. 그러나 테이블의 행 수가 증가하고 n 값이 커지면 페이지 길이가 매우 길어집니다. 그래서 각 테이블에 트리 뷰를주고 싶습니다. 마찬가지로 '+'값을 가진 각 테이블 위에 버튼이 있습니다. 그 값을 클릭하면 값이 '-'로 바뀌고 그 테이블이 보여야합니다. 내가이 정확한 코드가 아닙니다

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".show").html("<input type='checkbox'>"); 
    $('.tree td').hide(); 
    $('th ').click(function() { 
    $(this).parents('table').find('td').toggle(); 
    }); 
}); 

<table width="100%" class="tree"> 
<tr width="20px"><th colspan="2" class="show"> </th></tr>       
<tr> 
    <td width="50%"><b>Name</b></td> 
    <td width="50%"><b>Last Updated</b></td> 
</tr> 

    while($row = $result_sql->fetch_assoc()) 
    { 
     <tr> 
     <td width='50%'><a href='http://127.0.0.1/wordpress/?page_id=464&name_file={$row['name']}&cat={$cat}&sec={$sec}' target='_blank'>{$row['title']}</a></td> 
     <td width='50%'>{$row['created']}</td>        
     </tr> 
    } 
    </table> 

을 시도 여기에서 .

내가 볼 수 있듯이 나는 그것을 할 수 있지만 나는 chackbox를 사용하고있다. 나는 값 + 또는 - 버튼을 갖고 싶다. 이 코드에는 한 가지 문제가 있습니다. 확인란을 클릭하면 테이블이 확장되어 표시되는 선은 확인란이 아닌 전체 행을 의미합니다. 그럼 아무도 이걸 도와 줄 수 있니?

감사

Answer 1

나는 미래에 더 쉽게 사람들이 도움을 할 수 있도록하기 위해 jsFiddle를 제공하려고,이 코드 샘플입니다 것을 알고있다. 당신이 +/- 사용하려는 경우, 당신은 my example

<th colspan="2" width="100%"><span class="show"></span></th> 

같은 사소한 수정을 할 수 있습니다 나는 기본적으로 가 <th> 내에서 스팬 클래스를 보여뿐만 아니라 그것에 클릭 처리기를 부착했다. 당신이 그것을 클릭하면, 그것은합니다 ... 부모<table> 내 <td>를 전환 할뿐만 아니라, 그것은 <th>에 텍스트 값을 확인 및 역 것이다 그것을

$('.show').click(function() { 
    $(this).parents('table').find('td').toggle(); 
    $(this).text() == '+' ? $(this).text('-') : $(this).text('+'); 
}); 

당신이 필요하지 않기 때문에 확인란이고 <span>을 사용하는 경우 전체 <th>을 감싸지 않습니다. 이게 네가 찾고 있던거야?

Answer 2

가져 오기 솔루션

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".show").html("<input type='button' value='+' class='treebtn'>"); 
$('.tree td').hide(); 
$('.treebtn ').click(function() { 
$(this).parents('table').find('th').parents('table').find('td').toggle(); 
if (this.value=="+") this.value = "-"; 
else this.value = "+"; 

}); 
}); 

그것은 잘 내가 원하는 방식으로 노력하고 있습니다.