Question

我在表中显示指令，我想让每一行都可单击，这有点像用js onclick函数所做的（我只能单击名称，但我想将此名称应用于整行）。现在，我想在新选项卡中查看有关声明的详细信息。我的问题从这里开始。我想在单击一行但不知道如何执行时获取声明ID。另外，我正在用js做onclick，其余的是php，所以那里有点混乱。我知道这不是最好的方法，所以我需要您关于如何解决此问题的建议。

P.S。我对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>元素。完成此操作后，您就可以使用必须将proc_id传递给您在函数中设置的window.open();方法中使用的相同函数。

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数据作为URL参数附加到procdetail.php进行解析。

请注意，该代码仅包含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上的问题。它包含一个托管在JSFiddle中的可用demo。

Answer 2

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

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

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

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

这就像为您的row元素返回一个属性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的更多信息。

Answer 3

尝试一下

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

在新标签页中打开用户个人资料

3 个答案:

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

其他资源：