时间戳

首页 > 解决方案 > 如何使用 ajax 和 php 填充表格并在表格行中添加按钮？

javascript - 如何使用 ajax 和 php 填充表格并在表格行中添加按钮？

问题描述

我正在尝试从数据库中读取信息并将它们放在一个表中，并在每行的最后一列中包含按钮。除了添加按钮之外，我在让它工作时遇到了麻烦。

这是我的retrieve.php

 <?php 

require_once 'connect.php';


 $output = array('data' => array());
 $sql = "SELECT * FROM student_acc";
$query = $connect->query($sql);

$x = 1;
while ($row = $query->fetch_assoc()) {

    $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" onclick="viewAd('[ad_id]')"><i class="material-icons">&#xE417;</i></a>' +
'<a href="#" class="edit" title="Edit" data-toggle="tooltip" onclick="editAd('[ad_id]')"><i class="material-icons">&#xE254;</i></a>' +
'<a href="#" class="delete" title="Delete" data-toggle="tooltip" onclick="deleteAd('[ad_id]')"><i class="material-icons">&#xE872;</i></a>'
 ; // buttions I'd like to include


    $output['data'][] = array(
        $x,
        $row['address'],
        $row['single_unit'],
        $row['single_rent'],
        $row['sharing_unit'],
        $row['sharing_rent'],
        $row['date'],
        $actionButton; //I'm not sure how to include this
    );

    $x++;
} 
$connect->close();

echo json_encode($output);

我的 ajax.js

    $(document).ready(function(){               
            $.ajax({
            type: "POST",
            dataType: "json",
            url: "tableretrieve/retrievestudent.php",
            data: {action: "load"},
            success: function (response){
                console.log(response);
                $.each(response, function(index, obj) {
                var row = $('<tr>');
                row.append('<td>' + obj.address + '</td>');
                row.append('<td>' + obj.single_unit + '</td>');
                row.append('<td>' + obj.single_rent + '</td>');
                row.append('<td>' + obj.sharing_unit + '</td>');
                row.append('<td>' + obj.sharing_rent + '</td>');
                row.append('<td>' + obj.date + '</td>');
                row.append('<td>' + *Code to include buttions here* + '</td>');

                $('table').append(row)
                });
                }
            });

    });

我用下面的代码做了一些测试，结果很好：

    $(document).ready(function(){

        var ActionButions ='<a href="#" class="view" title="View" data-toggle="tooltip"><i class="material-icons">&#xE417;</i></a>' +
                '<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>' +
                '<a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>';

                 var row = $('<tr>');
                row.append('<td>' + "Vanderbijlpark, Bowker str, CE4, 12" + '</td>');
                row.append('<td>' + "3" + '</td>');
                row.append('<td>' + "1500" + '</td>');
                row.append('<td>' + "1" + '</td>');
                row.append('<td>' + "2500" + '</td>');
                row.append('<td>' + "2019/08/14" + '</td>');
                row.append('<td>' + ActionButions + '</td>');

                $('table').append(row); 

});

我试图通过从数据库中读取值来复制上面的代码。

标签： javascriptphpajax

解决方案

  1. 该字符串应与 . （点），而不是 PHP 脚本中的 +（加号）。这里的 [ad_id] 是什么？如果它是数据库表的 id 列，请使用 .$row['ad_id']..

    $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" 
onclick="viewAd('.$row['ad_id'].')"><i class="material-icons">&#xE417;</i></a>' 
.
'<a href="#" class="edit" title="Edit" data-toggle="tooltip" 
onclick="editAd('.$row['ad_id'].')"><i class="material-icons">&#xE254;</i></a>' 
. 
'<a href="#" class="delete" title="Delete" data-toggle="tooltip" 
onclick="deleteAd('.$row['ad_id'].')"><i class="material-icons">&#xE872;</i> 
</a>'
;

  2. 您可以尝试使用如下键和值的关联数组：

    $output['data'][] = array(
    $x,
    $row['address'],
    $row['single_unit'],
    $row['single_rent'],
    $row['sharing_unit'],
    $row['sharing_rent'],
    $row['date'],
    'buttons' => $actionButton // no colon here
);

  3. 并尝试row.append('<td>' + obj.buttons + '</td>');

使用可帮助您修复语法错误的代码编辑器。此外，使用浏览器开发工具（F12在 Windows 上和在 Mac 上 ++ cmd）查找 JavaScript 错误。optioni

推荐阅读