JQuery가 PHP while 루프에서 작동하지 않습니다.

Question

편집 가능한 테이블에 JQuery 자동 완성 기능을 사용하려고합니다. 내 테이블에 여러 행이 있습니다 (개수는 가변적입니다). while 루프를 사용하여 데이터베이스에서 데이터를 가져오고, My JQuery 함수는 루프 외부에 배치됩니다. 하지만 자동 완성 작업은 첫 번째 행에서만 작동합니다.

모든 행에서 함수를 호출하라는 제안이 있습니까? 자동 완성 작업을 모든 행에서 수행하기를 원합니다.

제게 나에게 매우 새롭다고 제안 해주세요.

여기

  <?php 
      $connect = mysqli_connect("localhost", "root", "A", "ABC"); 
      $output = ''; 
      $sql = "SELECT * FROM PROVISIONING WHERE COMMENTS='NOT_UPDATED' AND UPDATED_BY='NOT_UPDATED' ORDER BY id DESC"; 
      $result = mysqli_query($connect, $sql); 
      $output .= ' 
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
      <script> 
      $(function() { 
       var availableTags = [ 
        "Arindam", 
       "Completed", 
       "Pending" 
             ]; 
       $("#tags").autocomplete({ 
       source: availableTags 
       }); 
       $("#tags1").autocomplete({ 
       source: availableTags 
       }); 
       $("#tags2").autocomplete({ 
       source: availableTags 
       }); 
       $("#tags3").autocomplete({ 
       source: availableTags 
       }); 

      }); 
      </script> 
      <div class="ui-widget"> 
      <table align="middle" border="1" bordercolor="green" class="table table-bordered"> 
      <tr> 
      <th style="color:blue;font-style:italic;" hidden>Id</th> 
      <th style="color:blue;font-style:italic;">Task ID</th> 
      <th style="color:blue;font-style:italic;">Request ID</th> 
      <th style="color:blue;font-style:italic;">END Date</th> 
      <th style="color:blue;font-style:italic;">Updated Date</th> 
      <th style="color:blue;font-style:italic;">Pending Tasks</th> 
      <th style="color:blue;font-style:italic;">Comments</th> 
      <th style="color:blue;font-style:italic;">Assignee</th> 
      <th style="color:blue;font-style:italic;">Updated By</th> 
      <th style="color:blue;font-style:italic;" hidden>Delete</th> 
      </tr>'; 

      if(mysqli_num_rows($result) > 0) 
      { 
       while($row = mysqli_fetch_array($result)) 
       { 
      $output .= ' 
      <tr> 
      <td hidden>'.$row["id"].'</td> 
      <td class="TASK_ID" data-id1="'.$row["id"].'" >'.$row["TASK_ID"].'</td> 
      <td class="REQUEST_ID" data-id2="'.$row["id"].'" >'.$row["REQUEST_ID"].'</td> 
      <td class="END_DATE" data-id3="'.$row["id"].'" >'.$row["END_DATE"].'</td> 
      <td class="UPDATED_DATE" data-id4="'.$row["id"].'" contenteditable>'.$row["UPDATED_DATE"].'</td> 
      <td id="tags" class="AUTOMATED_TASKS" data-id5="'.$row["id"].'" contenteditable>'.$row["AUTOMATED_TASKS"].'</td> 
      <td id="tags1" class="COMMENTS" data-id6="'.$row["id"].'" contenteditable>'.$row["COMMENTS"].'</td> 
      <td id="tags2" class="ASSIGNEE" data-id7="'.$row["id"].'" contenteditable>'.$row["ASSIGNEE"].'</td> 
      <td id="tags3" class="UPDATED_BY" data-id8="'.$row["id"].'" contenteditable>'.$row["UPDATED_BY"].'</td> 
      <td hidden><button type="button" name="delete_btn" data-id9="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td> 
      </tr>'; 
      } 
      $output .= ' 
      <tr> 
      <td id="TASK_ID" contenteditable></td> 
      <td id="REQUEST_ID" contenteditable></td> 
      <td id="END_DATE" contenteditable></td> 
      <td id="UPDATED_DATE" contenteditable></td> 
      <td id="AUTOMATED_TASKS" contenteditable></td> 
      <td id="COMMENTS" contenteditable></td> 
      <td id="ASSIGNEE" contenteditable></td> 
      <td id="UPDATED_BY" contenteditable></td> 
      <td hidden><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td> 
      </tr>'; 
      } 
      else 
      { 
      $output .= '<tr> 
      <td colspan="4">Data not Found</td> 
      </tr>'; 
      } 
      $output .= '</table> 
      </div>'; 
      echo $output; 
      ?> 

Answer 1

ID는 전체 페이지에서 고유해야합니다 내 코드입니다.

테이블에 여러 개의 행을 생성하면 각 행에 id="tags"의 셀이 있습니다 (즉, 페이지 내에서 고유하지 않음). JQuery는이 때문에 다른 셀을 찾을 수 없습니다.

당신은, 당신은 jQuery의 셀렉터 찾을 수있는 무언가를 공유 class 대신 id의 속성 대신 #tags의 .tags를 사용하기 위해 더 많은 세포를합니다.