PHP jQuery 脚本修改/修正

Question

我在页面上有这个表格:

这只是查询结果，返回属于当前用户的记录。我添加了删除按钮。

我是 jquery&ajax 新手，我自己发明了这个任务。我想使用这些技术来处理按钮。它应该删除表中的一行。

由于我的技能较弱，我只能通过一种方式做到这一点

    $user=$_SESSION['userid'];
    $con = db_connect();

    $result = $con->query("SELECT  `id_app`, `date_cr`,`id_user`
                            FROM `applications`
                            WHERE id_user = $user");
    if(($data = $result->num_rows)==0){
            echo '<p class="error">No data</p>';                
            exit;
    }
    else
    {           
        echo '<script type="text/javascript" 
        src="./functions/jquery-1.7.1.min.js"></script>';   

        echo '<br/><br/><table id="tab_history">
        <tr><td>Time when created</td><td></td></tr>';

        while(($data = $result->fetch_assoc())!==null)
        {
            echo '<tr>';
            echo '<td>'.$data['date_cr'].'</td><td>';
            echo '<button id="btnDel'.$data['id_app'].'" type="button">
            Delete</button></td></tr>';

            echo '
            <script type="text/javascript">
            $("#btnDel'.$data['id_app'].'").click(function (e) { 
                e.preventDefault();

                if (confirm(\'Are you sure?\')){
                    var id_app = '.$data['id_app'].';
                    var id_user = '.$data['id_user'].';

                    var info = \'id_app=\'+id_app+\'&id_user=\'+ id_user;

                    $.ajax({
                       type: "POST",
                       url: "./functions/del_app.php",
                       data: info,
                       success: function(){                             
                        location.reload();                          
                        }   
                    });                                         
                }                     
                });         
            </script>'; 
        }
        echo '</table>';
    }

没关系，正在删除，所以我不附加函数文件。

但这确实是个愚蠢的方法:P。我正在向每一行添加脚本。我一直在想如何用一个脚本来制作它，但不知道。也许按钮类？

我真的很想知道如何通过一个脚本留下按钮来获得相同的效果。

提前致谢。

Answer 1

你可以试试这个:

将按钮 ID 更改为类“btnDel”并添加新的自定义属性:

echo '<button class="btnDel" data-app-id="'.$data['id_app'].'"  data-user-id="'.$data['id_user'].'" type="button">
            Delete</button></td></tr>';

仅放置一次 JavaScript 并更改代码以检索您放置在属性中的数据:

<script type="text/javascript">
            $(".btnDel").click(function (e) { 
                e.preventDefault();

                if (confirm(\'Are you sure?\')){
                    var id_app = $(this).attr('data-app-id'); // retrieve the app id
                    var id_user = $(this).attr('data-user-id'); // retrieve the user id
                    var row = $(this).parent().parent(); // retrieve the parent row so we can remove it without reloading the whole page

                    var info = \'id_app=\'+id_app+\'&id_user=\'+ id_user;

                    $.ajax({
                       type: "POST",
                       url: "./functions/del_app.php",
                       data: info,
                       success: function(){                             
                        $(row).remove(); // remove the row                          
                        }   
                    });                                         
                }                     
                });         
            </script>

删除完成后，请注意，您可以删除该行，而不是重新加载整个页面。