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

Question

I am displaying proclamations in a table and I want to make each row clickable which I kinda did with js onclick function (i can only click on the name but i want to apply this to whole row). Now I want to see details about proclamations in new tab. My question starts here. I want to get proclamation ID when I click on a row but no idea how to do it. Plus i am doing onclick with js and rest of it is php so it's getting kinda messy there. I know it's not the best way to do it so i need your advice about how can I solve this issue.

PS I am not very familiar with js, those js parts been taken from web tutorials. And the code below is the section where I display the search results.

<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

If you want to continue to use inline JavaScript, you will first need to change the onClick attribute to be on the <tr> element instead of the <td> element. Once that is done, you can use the same function you have to pass the proc_id to the URL in the window.open(); method you have set in the function.

HTML/PHP

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

Javascript

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

This will make each of the table rows a clickable element that links to procdetail.php?proc_id=<YOUR_ID>

There is a way to perform this in HTML as well, but you want to modify the CSS of the table elements so that there are not non-clickable dead zones in the table row.

Using your current method of the single line echo, you could use something similar to the code below. This will append the proc_id data as a URL parameter for procdetail.php to parse.

Notice that the code only includes p_name and p_surname . You would have to add each definition with the same method.

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;
}

Check out this thread on the issue. It includes a usable demo that is hosted in JSFiddle.

Answer 2

In your JavaScript function that calls window.open , you need to call the second parameter which will be the target to open the window, adding _blank will open it on a new tab instead of the same window:

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

Give JavaScript the data needed to handle your information.

Also, if your idea is to open the tab with JavaScript with the content specially for the row, then you should try returning the necessary information to it, for example, if you want to open a new window with the content of a user, then you must let know JavaScript which user id should open.

This is as easy as returning in an attribute for your row element the value of the user id which data is being outputted by PHP.

Do something like this in your inline PHP script:

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>
";

And then in your JavaScript code you could use an event listener for every element in your DOM with 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');
        });
    })
}

This will open in a new tab the contents of the url given which is procdetail.php?id=userId . So then, in your procdetail.php file you must handle the $_GET["id"] variable to show the respective data.

Additional resources:

You can read more of the window.open method here .

Answer 3

尝试这个

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