Question

我在页面上有这个表：

enter image description here

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

我是jquery＆amp; 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

如果您正在使用jQuery，那么您应该正确利用AJAX的功能并一起使用php和javascript。这不仅提供了一个光滑的用户体验，而且它的灵活性和简单性。我相信本教程最适合您的需求：

http://www.9lessons.info/2009/01/delete-record-using-ajax-get-method-and.html

此外，如果您需要从php传递变量，而不是回显所有JavaScript，请执行以下操作：

var myJavaScriptVariable = <?=myPHPvariable?>; //if its a number
var myJavaScriptVariable = '<?=myPHPvariable?>'; //if its a string

您还可以在页面加载时向php脚本发起AJAX请求，然后以该格式接收变量

Answer 2

是否有特定需要的html表？如果没有，您可以使用jqgrid与每行可用的复选框。选择复选框或页面底部的单独删除按钮，您可以在选择复选框时触发删除操作。

您可以参考http://www.trirand.com/blog/jqgrid/jqgrid.html提供的演示。

Answer 3

你可以试试这个：

将按钮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>

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

Answer 4

根据我自己的经验，我会做以下事情：

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

$result = $con->query("SELECT  `id_app`, `date_cr`,`id_user`
                        FROM `applications`
                        WHERE id_user = $user");
?>

<?php if(($data = $result->num_rows)==0){ ?>

    <p class="error">No data</p>                

<?php } else { ?>           
    <script type="text/javascript" src="./functions/jquery-1.7.1.min.js"></script>';   
    <br/>
    <br/>
    <table id="tab_history">
        <tr>
            <td>Time when created
            <td>
        </tr>

    <?php while(($data = $result->fetch_assoc())!==null) { ?>
        <tr>
            <td><?=$data['date_cr'] ?>
            <td><button class="btnDel" data-id-app="<?=$data['id_app'] ?>" data-id-user="<?=$data['id_user'] ?>" type="button">
        Delete</button>
        </tr>

    <?php } ?>
    </table>
<?php } ?>
<script>
$(".btnDel").click(function (e) { 
            e.preventDefault();

            if (confirm(\'Are you sure?\')){
                var id_app = $(this).attr('data-id-app');
                var id_user = $(this).attr('data-id-user');

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

更清楚，对我来说至少......

PHP jQuery脚本修改/更正

4 个答案: