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

Question

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

这是我的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); 

});  

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

Answer 1

1. 字符串应使用 . 连接起来。 (点)，而不是 PHP 脚本中的 +(加号)。 这里的[ad_id]是什么？如果是DB表的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>');

使用代码编辑器来帮助您修复语法错误。另外，使用浏览器开发人员工具(Windows 上的 F12 和 Mac 上的 cmd+option+i)来查找您的JavaScript 错误。