Question

在我的项目中，我有3个表格-调查，调查问题，调查选项。在调查表中，它存储调查名称。在调查问题表中，将问题存储到相应的调查中。在调查选项表中，存储每个问题的选项。现在，我在表格中显示了调查名称。这里的问题是，当我单击任何调查名称时，它应显示调查的相应问题以及该问题的选项。例如，在页面中，调查名称显示如下 1. ABC调查 2. ERG调查

当我单击ABC调查时，它应显示与该调查有关的所有问题和选项。我是PHP编码的新手。我在XAMPP服务器上使用PHP，MySQL。我做了显示调查名称的工作。下面是我的代码

 <tr><th>Name</th><th>Created Date</th><th>Status</th></tr>
    <?php   
    $sql=mysqli_query($connection,"select * from survey"); 
    if(mysqli_num_rows($sql)==0) 
    { 
    echo "No records to display";
     }
     else {
     while($row=mysqli_fetch_array($sql)) {
     echo "<tr><td><a href='surveydetails.php' name='selected_survey_$i' 
    id='selected_survey'>".$row['survey_name']."</td><td>" .$row['created_date'] 
    ."</td>"; echo "<td>";
    if($row['status']==1){
    echo "<select name='status'>
    <option value='1' selected='selected'>Active</option>
    <option value='0'>Inactive</option>                                  
    </select>";
    }
    else{
    echo "<select name='status'>
    <option value='1'>Active</option>
    <option value='0' selected='selected'>Inactive</option></select>";
    }
    echo "</td></tr>";
    $i++;
    }
} 
?>

Answer 1

以下是不同的实现方式

在带有调查ID的名称中写上javascript onClick函数。使用javascript调用AJAX请求，并从数据库中获取有关两个表的数据，例如问题/答案。在窗口弹出屏幕中显示数据（在弹出窗口中显示AJAX响应数据）。
在带有调查ID的Name中的javascript onClick函数上编写。调用AJAX请求并从数据库中检索信息并显示在弹出框中。如果您使用引导程序，信息将以精美的外观显示。（您可以使用引导程序模式框。）在这里参考好例子 Bootstrap 3 - How to load content in modal body via AJAX?

引导程序：列出显示到表中的数据。提供链接以查看更多详细信息调用AJAX请求以从后端检索数据请参阅下面的示例代码：

/*Test. PHP file*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<table class="table table-striped table-bordered" style="width:100px;" id="sample">
    <tr>
        <th>Name</th>
    </tr>

    <tr>
        <td><button id="3" class="viewDetail">Surya</button></td>
    </tr>

    <tr>
        <td><button id="2" class="viewDetail">ABCD</button></td>
    </tr>

</table>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Content</h4>
            </div>

            <div class="modal-body" id="contentBody">

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

<script>
    $(document).ready(function () {
        $('#sample').on('click', '.viewDetail', function (e) {
            var id = $(this).attr('id');
            $.ajax({
                type: "POST",
                url: "getDetail.php?id=" + id,
                data: {id: id}
            }).done(function (data) {
                $("#contentBody").html(data);
                $('#myModal').modal({show: true});
            });
        });
    });
</script>




/*Second File : getDetail.php*/
<?php
$id = $_REQUEST['id'];
echo "Receive data from backend for ID ".$id;
?>

显示点击的详细信息

1 个答案: