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

Question

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

附：我对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>

Answer 1

如果您想继续使用内联 JavaScript，您首先需要将 onClick 属性更改为位于 <tr> 元素上，而不是 <td> 元素上。完成后，您可以使用您在函数中设置的 window.open(); 方法中必须将 proc_id 传递给 URL 的相同函数。

HTML/PHP

echo '<tr onclick="content(\''. $rows['proc_id'] .'\')">';

Javascript

function content(ID){
            window.open('procdetail.php?proc_id=' + ID, '_blank');
        }

这将使每个表格行成为链接到procdetail.php?proc_id=<YOUR_ID>的可点击元素

也有一种方法可以在 HTML 中执行此操作，但您希望修改表格元素的 CSS，以便表格行中没有不可点击的死区。

使用您当前的单行回显方法，您可以使用类似于以下代码的内容。这会将proc_id 数据附加为procdetail.php 解析的URL 参数。

请注意，代码仅包含p_name 和p_surname。您必须使用相同的方法添加每个定义。

PHP

echo "<tr><td><a href='procdetail.php?proc_id=". $rows['proc_id'] ."' target='_blank'>". $rows['p_name'] . "</a></td><td><a href='procdetail.php?proc_id=". $rows['proc_id'] ."' target='_blank'>". $rows['p_surname'] ."</a></td></tr>";

CSS

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

table tr td {
    padding-left: 0;
    padding-right: 0;
}

查看this thread 的问题。它包括一个可用的demo，托管在 JSFiddle 中。

Answer 2

试试这个

<a href="your url address" target = "_blank"> link name </a>

Answer 3

在调用window.open 的JavaScript 函数中，您需要调用第二个参数作为打开窗口的目标，添加_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 代码中，您可以使用class="table-item" 为 DOM 中的每个元素使用事件侦听器：

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方法here。