2016-11-20 105 views
-5

我想为可编辑表使用JQuery自动完成功能。我的表有多行(计数是可变的)。我使用while循环从数据库获取数据,我的JQuery函数放置在循环之外。但自动完成操作仅适用于第一行。JQuery不工作在PHP while循环

是否有任何建议调用每一行中的函数?我希望自动完成操作发生在每一行。

请推荐我,因为我对此很新。

这里是我的代码

  <?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; 
      ?> 
+0

你的代码在哪里?我们需要看到代码来帮助你:-) –

+0

你得到更多的投票,因为你没有分享你的代码。 –

+0

对不起,我很新,在stackoverflow。请查找代码 –

回答

0

ID必须在整个页面是唯一的。

如果您在表格中生成多行,则每行都会有一个单元格,即id="tags"(即,页面中不唯一)。由于这个,JQuery将无法找到其他单元。

如果你想要更多的细胞分享一些你可以用jQuery的选择找到,使用class属性,而不是id.tags,而不是#tags