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。

循环时，JQuery不能在php中工作

1 个答案: