PHP/jQuery - 테이블의 모든 행에서 셀에서 스크립트가 작동하지 않습니다.

동적으로 생성 된 행이있는 테이블이 있습니다. 마지막 열의 모든 행에서 버튼을 누른 행 아래에 보이지 않는 행을 표시/숨기기 버튼이 필요합니다.PHP/jQuery - 테이블의 모든 행에서 셀에서 스크립트가 작동하지 않습니다.

코드가 있지만 첫 번째 행과 다음 행에 아무런 반응이없는 Show/Hide 버튼이 있습니다. 당신은 요소마다 고유의 id이 필요하므로 아래와 같이 class에 id을 변경

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="jquery-1.9.1.js"></script> 
    <script> 
    $(function() { 
     $('#show_more').on('click',function(){ 
      var id_item = $(".btn").attr("id-data"); 
      $('.hidden_row_'+id_item).addClass('hidden_row_sh').removeClass('hidden_row_hide'); 
      $("#wh_tbl tr.hidden_row_"+id_item).fadeIn(400); 
      $(this).hide(); 
      $('#show_less').show(); 
     }); 
     $('#show_less').on('click',function(){ 
      var id_item = $(".btn").attr("id-data"); 
      $('.hidden_row_'+id_item).addClass('hidden_row_hide').removeClass('hidden_row_sh'); 
      $("#wh_tbl tr.hidden_row_"+id_item).fadeOut(400); 
      $(this).hide(); 
      $('#show_more').show(); 
     }); 
    }); 
    </script> 
    <style> 
    table.ranking-table, tr, td, th { 
     border-collapse:collapse; 
    } 
    .hidden_row_hide { 
     display:none; 
    } 
    .hidden_row_sh { 
     display:table-row; 
    } 
    #show_more .sign:after { 
     content:"⇩"; 
    } 
    #show_less .sign:after { 
     content:"⇧"; 
    } 
    button.btn { 
     font-weight: bold; 
     color: #666; 
     width:100%; 
     background:none; 
     border:none; 
    } 
    button.btn:focus { 
     outline:0; 
    } 
    </style> 
</head> 
<body> 

<table id="wh_tbl" class="ranking-table" border="1"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th style="text-align:center;">th_col2</th> 
      <th style="text-align:center;">th_col3</th> 
      <th style="text-align:center;">th_col4</th> 
      <th style="text-align:center;">th_col5</th> 
      <th style="text-align:center;">th_col6</th> 
      <th style="text-align:center;">th_col7</th> 
     </tr> 
    </thead> 
    <tbody> 
    <?php 
    for($i = 0; $i <= 10; $i++) 
    { 
     echo ' 
     <tr> 
      <td>'.$i.'</td> 
      <td style="text-align:center;">Text_'.$i.'</td> 
      <td style="text-align:center;">data_'.$i.'</td> 
      <td style="text-align:center;">web_'.$i.'</td> 
      <td style="text-align:center;">xxx_'.$i.'</td> 
      <td style="text-align:center;">yyy_'.$i.'</td> 
      <td style="text-align:center;"> 
       <div id="show_more"> 
        <button class="btn" id-data="'.$i.'" >Pokaż <span class="sign"></span></button> 
       </div> 
       <div id="show_less" class="hidden_row_hide"> 
        <button class="btn" id-data="'.$i.'" >Ukryj <span class="sign"></span></button> 
       </div> 
      </td> 
     </tr> 
     <tr class="hidden_row_'.$i.' hidden_row_hide"> 
      <td></td> 
      <td>col'.$i.'1</td> 
      <td>col'.$i.'2</td> 
      <td>col'.$i.'3</td> 
      <td>col'.$i.'4</td> 
      <td>col'.$i.'5</td> 
      <td>col'.$i.'6</td> 
     </tr>'; 
    } 
    ?> 
    </tbody> 
</table> 
</body> 
</html>

출처

2017-12-14 Tagon

ID를 문서의 컨텍스트 당신이 필요로하는 –

에서 고유해야합니다 요소마다 고유 한 'id'를 갖는다. –

: 여기

내 코드입니다 -

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
    $(function() { 
     $('.show_more').on('click',function(){ 
      $(this).closest('tr').next('tr').removeClass('hidden_row_hide'); 
      $(this).hide(); 
      $(this).next('.show_less').show(); 
     }); 
     $('.show_less').on('click',function(){ 
      $(this).closest('tr').next('tr').addClass('hidden_row_hide'); 
      $(this).hide(); 
      $(this).prev('.show_more').show(); 
     }); 
    }); 
    </script> 
    <style> 
    table.ranking-table, tr, td, th { 
     border-collapse:collapse; 
    } 
    .hidden_row_hide { 
     display:none; 
    } 
    .hidden_row_sh { 
     display:table-row; 
    } 
    .show_more .sign:after { 
     content:"⇩"; 
    } 
    .show_less .sign:after { 
     content:"⇧"; 
    } 
    button.btn { 
     font-weight: bold; 
     color: #666; 
     width:100%; 
     background:none; 
     border:none; 
    } 
    button.btn:focus { 
     outline:0; 
    } 
    </style> 
</head> 
<body> 

<table id="wh_tbl" class="ranking-table" border="1"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th style="text-align:center;">th_col2</th> 
      <th style="text-align:center;">th_col3</th> 
      <th style="text-align:center;">th_col4</th> 
      <th style="text-align:center;">th_col5</th> 
      <th style="text-align:center;">th_col6</th> 
      <th style="text-align:center;">th_col7</th> 
     </tr> 
    </thead> 
    <tbody> 
    <?php 
    for($i = 0; $i <= 10; $i++) 
    { 
     echo ' 
     <tr> 
      <td>'.$i.'</td> 
      <td style="text-align:center;">Text_'.$i.'</td> 
      <td style="text-align:center;">data_'.$i.'</td> 
      <td style="text-align:center;">web_'.$i.'</td> 
      <td style="text-align:center;">xxx_'.$i.'</td> 
      <td style="text-align:center;">yyy_'.$i.'</td> 
      <td style="text-align:center;"> 
       <div class="show_more"> 
        <button class="btn" id-data="'.$i.'" >Pokaż <span class="sign"></span></button> 
       </div> 
       <div class="show_less hidden_row_hide"> 
        <button class="btn" id-data="'.$i.'" >Ukryj <span class="sign"></span></button> 
       </div> 
      </td> 
     </tr> 
     <tr class="hidden_row_'.$i.' hidden_row_hide"> 
      <td></td> 
      <td>col'.$i.'1</td> 
      <td>col'.$i.'2</td> 
      <td>col'.$i.'3</td> 
      <td>col'.$i.'4</td> 
      <td>col'.$i.'5</td> 
      <td>col'.$i.'6</td> 
     </tr>'; 
    } 
    ?> 
    </tbody> 
</table> 
</body> 
</html>

출처

2017-12-14 12:40:41

PHP/jQuery - 테이블의 모든 행에서 셀에서 스크립트가 작동하지 않습니다.

답변

관련 문제