테이블 행의 버튼을 클릭하고 모달 창에 값을 표시하십시오.

Question

부트 스트랩과 부트 스트랩 테이블로 웹 사이트를 만듭니다. boostrap-table에 요소를 추가하려면 PHP를 사용합니다. 문제는 내가 클릭 한 행의 값을 모달 창에 표시하지 않는 수정 버튼을 클릭 할 때입니다.

문제는 jquery 코드에 있다고 생각합니다. 나는 브라우저의 debbug 콘솔과 다른 테스트를 수행하고 클릭했을 때 행의 값을 얻지 못하는 것을 보았습니다. 콘솔에서 다른 정보를 시도해 보았습니다. 예 : console.log($(this).text());

제발 어디에 문제가 있는지 이해하도록 도와 줄 수 있습니까?

코드 : 사전에

 <div class="row"> 
     <?php 
       $conn = Conectarse("localhost", "5432", "addcom", "dbadmin", "Tibidabo"); 
       //query 
       $query = "SELECT * FROM produccion.ma_producto ORDER BY codigo ASC"; 
       $result = pg_query($conn, $query); 
       //se despliega el resultado 
       ?><table class='table-bordered' id='tableprod' 
           data-toggle='table' 
           data-toolbar='#toolbar' 
           data-show-refresh='true' 
           data-show-toggle='true' 
           data-sort-name='name' 
           data-sort-order='desc' 
           data-show-columns='true' 
           data-pagination='true' 
           data-search='true'> 

        <thead class='thead-inverse'> 
         <tr> 
          <th data-field='seleccion' data-switchable='false' data-checkbox='true'></th> 
          <th data-field='estado' data-switchable='false'></th> 
          <th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th> 
          <th data-field='pagina' data-sortable='true'>PÀGINA</th> 
          <th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th> 
          <th data-field='image' data-switchable='false'>IMATGE</th> 
          <th data-field='descripcion-cat' data-sortable='true'>DESCRIPCIÓ CAT</th> 
          <th data-field='descripcion-esp' data-sortable='true'>DESCRIPCIÓ ESP</th> 
          <th data-field='marca' data-sortable='true'>MARCA</th> 
          <th data-field='gramaje' data-sortable='true'>GRAMATJE</th> 
          <th data-field='destacado' data-sortable='true' data-visible='false'>DESTACAT</th> 
          <th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th> 
          <th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th> 
          <th data-field='pvp-and' data-sortable='true'>PVP-AND</th> 
          <th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th> 
          <th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th> 
          <th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th> 
          <th data-field='pvp-spar' data-sortable='true'>PVP-SPAR</th> 
          <th data-field='user' data-sortable='true' data-visible='false'>USER</th> 
          <th data-field='fecha-mod' data-sortable='true' data-visible='false'>FECHA-MOD</th> 
          <th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th> 
         </tr> 
        </thead> 
        <tbody> 
       <?php while ($row = pg_fetch_row($result)){ ?> 
         <tr id='<?php echo $row[0]; ?>'> 
          <td></td> 
          <?php echo $estado = EstadoIcon($row[2]); ?> 
          <td name='edicion'><?php echo $row[1] ?></td> 
          <td name='pagina'><?php echo $row[3] ?></td> 
          <td name='codigo'><?php echo $row[0] ?></td> 
          <?php echo $imatge = AddImage($row[9]); ?> 
          <td name='descripcion-cat'><?php echo $row[5] ?></td> 
          <td name='descripcion-esp'><?php echo $row[4] ?></td> 
          <td name='marca'><?php echo $row[6] ?></td> 
          <td name='gramaje'><?php echo $row[7] ?></td> 
          <td name='destacado'><?php echo $row[8] ?></td> 
          <td name='pvp-cat'><?php echo $row[10] ?></td> 
          <td name='pvp-lev'><?php echo $row[11] ?></td> 
          <td name='pvp-and'><?php echo $row[12] ?></td> 
          <td name='pvp-cen'><?php echo $row[13] ?></td> 
          <td name='pvp-nor'><?php echo $row[14] ?></td> 
          <td name='pvp-vas'><?php echo $row[15] ?></td> 
          <td name='pvp-spar'><?php echo $row[16] ?></td> 
          <td name='user'><?php echo $row[17] ?></td> 
          <td name='fecha-mod'><?php echo $row[18] ?></td> 
          <td><button class='btn btn-xs edit btn-edit' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></td> 
         </tr> 
       <?php } ?> 
        </tbody> 
       </table> 


<script> 

var $table = $('#tableprod'); 

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

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

      $tdata = $row.find("td"); 

      console.log($(this).text()); 

      $.each($tdata, function(index, value) { 
       alert ('Entró'); 
       console.log($(this).text()); 
       $("input:eq(" + index + ")").val($(this).text()); 
      }); 
     });  

     </script> 

감사합니다!

Answer 1

click 이벤트는 버튼이 아니라 테이블과 연관된해야합니다

$('.btn-edit').click(function() { 

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

      $tdata = $row.find("td"); 

      console.log($(this).text()); 

      $.each($tdata, function(index, value) { 
       alert ('Entró'); 
       console.log($(this).text()); 
       $("input:eq(" + index + ")").val($(this).text()); 
      }); 
      $('#edit').modal('show') 
     }); 

귀하의 편집 버튼을 부트 스트랩 모달를 트리거 : 당신이 중 하나를 클릭 이벤트 $('#edit').modal('show')에 프로그래밍 방식 모달 당신의 편집 버튼에서 data-toggle='modal'을 제거하고 트리거 할 수 .

$('#edit').on('show.bs.modal', function (event) { 
    var $button = $(event.relatedTarget) // Button that triggered the modal 
    var $row = $button.closest("tr"), 

     $tdata = $row.find("td"); 

     console.log($button.text()); 

     $.each($tdata, function(index, value) { 
      alert ('Entró'); 
      console.log($(this).text()); 
      $("input:eq(" + index + ")").val($(this).text()); 
     }); 
});