时间戳

首页 > 解决方案 > 在新选项卡中打开用户配置文件

php - 在新选项卡中打开用户配置文件

问题描述

我在表格中显示公告，我想让每一行都可以点击，这有点像我用 js onclick 函数所做的那样（我只能点击名称，但我想将其应用于整行）。现在我想在新标签中查看有关公告的详细信息。我的问题从这里开始。我想在单击一行时获得公告 ID，但不知道该怎么做。另外，我正在使用 js 进行 onclick，其余部分是 php，所以那里有点乱。我知道这不是最好的方法，所以我需要你关于如何解决这个问题的建议。

PS我对js不是很熟悉，那些js部分取自网络教程。下面的代码是我显示搜索结果的部分。

<section id="results">
    <div class="container">
        <table>
            <tr>
                <a href="#"><th>Name</th></a>
                <th>Where</th>
                <th>From</th>
                <th>Date</th>
                <th>Price</th>
                <th>Type</th>
                <th>PId</th>
            </tr>

            <?php
                if(isset($_POST['search_btn'])){
                    include_once "db_connect.php";

                    $from = $_POST['from'];
                    $where = $_POST['where'];
                    $date = $_POST['date'];
                    $type = $_POST['type'];
                    $procid = $_POST['proc_id'];

                if(empty($from) || empty($where) || empty($date) || empty($type)){
                    header("Location: index.php?search=empty");
                    exit();
                }else{
                    $sql = "SELECT * FROM proc WHERE p_from = '".$from."' and p_where = '".$where."' and type= '".$type."' ";
                    $query = mysqli_query($conn, $sql);
                    $num_rows = mysqli_num_rows($query);
                        while ($rows = mysqli_fetch_array($query, MYSQLI_ASSOC)) {

                            echo "<tr><td onclick='content(this)'>" . $rows['p_name'] . " " . $rows['p_surname']. " </td><td>" .$rows['p_from']. "</td><td>" .$rows['p_where']. "</td><td>" .$rows['p_date']. "</td><td>" .$rows['price']. "</td><td>" .$rows['type']. "</td></tr>" ;
                        }
                        echo "</table>";
                    }

                }else{
                        echo "Error!";
                    }

            ?>


            <?php
                $fullUrl = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

                if(strpos($fullUrl, "search=empty") == true){
                    echo "<p class='error'>You did not fill in all fields!</p>";
                }

            ?>
        </table>
    </div>
</section>

<script>
        function content(elem){
            <?php 

             ?>
            window.open('procdetail.php');
        }
</script>

标签： phphtml

解决方案

在调用 的 JavaScript 函数中window.open，您需要调用第二个参数，这将是打开窗口的目标，添加_blank将在新选项卡而不是同一窗口上打开它：

window.open('procdetail.php', '_blank');

为 JavaScript 提供处理您的信息所需的数据。

此外，如果您的想法是使用 JavaScript 打开带有该行内容的选项卡，那么您应该尝试向其返回必要的信息，例如，如果您想打开一个包含用户内容的新窗口，那么你必须让 JavaScript 知道应该打开哪个用户 ID。

这就像在您的行元素的属性中返回用户 ID 的值一样简单，该值是由 PHP 输出的数据。

在你的内联 PHP 脚本中做这样的事情：

echo "
<tr class='table-item' data-userid='USER_ID_VARIABLE_HERE'>
    <td>" . $rows['p_name'] . " " . $rows['p_surname']. " </td>
    <td>" .$rows['p_from']. "</td>
    <td>" .$rows['p_where']. "</td>
    <td>" .$rows['p_date']. "</td>
    <td>" .$rows['price']. "</td>
    <td>" .$rows['type']. "</td>
</tr>
";

然后在您的 JavaScript 代码中，您可以为 DOM 中的每个元素使用事件侦听器class="table-item"：

window.onload = () => {
    let tableItems = document.querySelectorAll(".table-item");
    tableItems.forEach((element) => {
        element.addEventListener("click", (event) => {
            //Handle your click event here
            let userId = event.target.dataset.userid; //Your user id
            window.open('procdetail.php?id=' + userId, '_blank');
        });
    })
}

这将在一个新选项卡中打开给定 url 的内容procdetail.php?id=userId。因此，在您的procdetail.php文件中，您必须处理$_GET["id"]变量以显示相应的数据。

其他资源：

你可以在这里阅读更多的window.open方法。

推荐阅读