Question

我想在HTML / Javascript中调用PHP中的变量（id），其中来自数据库的行的ID将从锚点发送到另一个页面，以便可以在表格中查看行详细信息。

var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + point.edate + '</p></span>' +
        '<p class="event-description">'+ point.description +'</p>' + 
        '<input type="button" id="view-event"  class="btn btn-info btn-sm" onclick="showDetails();" value="View Event" />'+
        '<a href="details.php<?php echo $id; ?>" class="btn btn-danger btn-sm">Remove Event</a>' +
        '</div>');

例如，保存并显示了许多不同的事件，当单击VIEW按钮时，它会打开一个新页面，其中带有该ID的事件显示在表格中。

更新我也通过在PHP / HTML中创建详细信息列表来尝试它：

$result = mysqli_query($con,"SELECT * FROM events");

                while($row = mysqli_fetch_array($result))
                {
                    echo "<div class='event-details' id='event-details' style='display: none'>";
                    echo "<h3>Event Details</h3>";
                    echo "<table class='table'>";
                    echo "<tr><th>Event Name: </th><td>" . $row['name'] . "</td></tr>";
                    echo "<tr><th>Event Date: </th><td>" . $row['edate'] . "</td></tr>";
                    echo "<tr><th>Event Type: </th><td>" . $row['category'] . "</td></tr>";
                    echo "<tr><th>Event Details: </th><td>" . $row['description'] . "</td></tr>";
                    echo"</table>";
                    echo "<td><a href='details.php?id=".$row['id']."' class='btn btn-warning btn-sm'>View</a></td></div>";
                }

然后使用clone（）：

在javascript中显示

var eventList = $("#event-details").clone().show();

google.maps.event.addListener(event_markers[i], "click", function () {
        infowindow.setContent(eventList[0]);
        infowindow.open(map, event_markers[i]);
        map.setCenter(marker.getPosition());
        map.setZoom(10);
    });

现在这种方式将ID发送到输入，但是它向每个项目发送相同的ID - 数据库中当前有5行，ID为6到10，但是当页面加载时，它会发送所有事件的第一个ID（6），而不是从每个事件中为每个事件提供自己唯一的ID。

Answer 1

你的代码可以这样：

var id = <?php echo $id; ?>;
var eventContent = $('<div class="event-info">' + '<h4 class="event-name">' + point.name + '</h4><hr>' +
        '<span><h5>Date: </h5>' +
        '<p class="event-date">' + point.edate + '</p></span>' +
        '<p class="event-description">'+ point.description +'</p>' + 
        '<input type="button" id="view-event"  class="btn btn-info btn-sm" onclick="showDetails();" value="View Event" />'+
        '<a href="details.php?id=' + id + '" class="btn btn-danger btn-sm">Remove Event</a>' +
        '</div>');

然而我发现这更清洁了：

<div class="event-info">
  <h4 class="event-name"></h4>
  <hr>
  <span>
    <h5>Date: </h5>
    <p class="event-date"></p>
  </span>
  <p class="event-description"></p>
  <input type="button" id="view-event" class="btn btn-info btn-sm"
    onclick="showDetails();" value="View Event" />
  <a class="btn btn-danger btn-sm">Remove Event</a>
</div>

// below is the javascript example for your manipulations

var id = <?php echo $id; ?>;
$('h4.event-name').html(point.name);
$('p.event-date').html(point.edate);
$('p.event-description').html(point.description);
$('p.event-description').html(point.description);
$('div.event-info a.btn').attr('href', 'details.php?id='+id);

使用后者，您可以拥有一个容器来存储您的事件数据（例如，如果您必须在同一页面中显示更多它们），然后从数据库中生成一个ID列表。步骤将是：

准备了一个div（就像一个空模板）
获取事件列表（作为数组，或更好，JSON）
将列表从php传递到javascript到JS变量（或者可能做一个AJAX调用）
使用JS迭代数组
- 为每个人克隆容器并为其分配唯一的ID
- 对于每个容器，您都有一个稍微修改过的JavaScript代码版本（见下文）

所以你不必担心可读性或可重用性。

var id = point.id;
$('div#' + id + ' h4.event-name').html(point.name);
$('div#' + id + ' p.event-date').html(point.edate);
$('div#' + id + ' p.event-description').html(point.description);
$('div#' + id + ' p.event-description').html(point.description);
$('div#' + id + ' div.event-info a.btn').attr('href', 'details.php?id='+point.id);

与往常一样，进一步的改进和建议非常受欢迎。

Answer 2

看起来您的服务器正在返回一些事件数据。让它返回事件ID。

例如，如果您的页面为各种事件返回JSON，请在JSON对象中包含ID。

在javascript中调用PHP变量

2 个答案: