Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Make tr clickable? No <a> (or it needs to be invisible)

    Hello! I am trying to list all data from rows in a table. That works. But what I want is for each row their to be a link specific to the id of the row!

    PHP Code:
    <style>
    body {
        font-family: arial;
      background-color: #47ccaf;
      color: #105949;
    }
    </style>
    <center><strong>
    <h1>Below is a list of all reports!</h1>
    <p>Note: You can click on a report to see it's own page!</p>
    <style>
    table {
      text-align: center;
        border-collapse: collapse;
      width: 80%;
      border-color:white;
      color: white;
      font-weight:bold;
    }
    th {
        background-color: #38a58d;
        color: white;
    }
    th, td {
        padding: 10px;
    }
    tr:nth-child(even){background-color: #49d8b9}
    tr:nth-child(even):hover{opacity:0.7;}
    tr:nth-child(odd):hover{opacity:0.7;}
    </style>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    </head>
    <?php
    $con
    =mysqli_connect("localhost","reports","*****************","reports");
    // Check connection
    if (mysqli_connect_errno())
    {
    echo 
    "Failed to connect to MySQL: " mysqli_connect_error();
    }

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

    echo 
    "<table border='0'>
    <tr> ******HERE IS WHERE I NEED THE ROW TO BE CLICKABLE*****
    <th>ID</th>
    <th>Users IGN</th>
    <th>Reported Players IGN</th>
    <th>Category</th>
    <th>Reason</th>
    </tr>"
    ;

    while(
    $row mysqli_fetch_array($result))
    {
    echo 
    "<tr>";
    echo 
    "<td>" $row['id'] . "</td>";
    echo 
    "<td>" $row['reportsign'] . "</td>";
    echo 
    "<td>" $row['reportedplayersign'] . "</td>";
    echo 
    "<td>" $row['category'] . "</td>";
    echo 
    "<td>" $row['reason'] . "</td>";
    echo 
    "</tr>";
    }
    echo 
    "</table>";

    mysqli_close($con);
    ?>
    I would like the link to goto "http://domain.domain/index.php?id=[id]" I would fill it in with the $row['id'] which wouldnt be hard at all! I don't really want to use jquery but if i have to i will!

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,165
    Thanks
    31
    Thanked 970 Times in 967 Posts
    Why is this in the PHP section? Is it because you spit out a bunch of echos to construct a HTML table or because you have a query that uses "while($row = mysqli_fetch_array($result)) " which no body here can read?

    You want something to happen when you click something; that's JavaScript.

    Run your code and then post the HTML results in the JS section please.

    BTW your question is an easy thing to answer.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New Coder
    Join Date
    Jun 2017
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry

    Sorry. I didn't know where to put it but the reason is I needed it to change per re output with php. So it cant just be set to one link universally which is the hard part. I actually found a solution for now but I need a little more help. So here I have the html output. I added a background of red to show you where the clickable part is. I need the css to make the whole tr clickable. Everywhere. I also need the text to be centered in the table along with the picture. Just in the center of the th element.
    RE: I fixed the align-center with
    Code:
    img {vertical-align:middle;}
    but i still need to make it so the while row is clickable in every area
    Last edited by superblaze27; 07-17-2017 at 04:33 PM.

  4. #4
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    10,729
    Thanks
    6
    Thanked 1,277 Times in 1,247 Posts
    If you don’t want to use JS you can add a link to every cell in the row that points to the same location and make them display: block.

  5. #5
    New to the CF scene
    Join Date
    May 2015
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    set a cursor for all of your tr in css and add on click event on your tr

  6. #6
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,068
    Thanks
    2
    Thanked 297 Times in 287 Posts
    Quote Originally Posted by VIPStephan View Post
    If you donít want to use JS you can add a link to every cell in the row that points to the same location and make them display: block.
    ... and as bloated a mess as the code for this would be, this is probably the best answer. There are other techniques like absolute positioning an anchor OVER the table row, but that goes bits-up face-down in IE.

    That said:

    1) Lose the style tag, that's garbage that has no business in your markup.

    2) you seem to be closing </head> AFTER you have <center>, <h1>, <p>, and <strong> -- the <head> tag is for NON-RENDERING information as such that placement of it is outright gibberish nonsense. Did you mean to use HTML 5's idiotic halfwit nonsensical <header>?

    3) lose the <center> tag, this isn't 1997.

    4) you open a <strong> for nothing.

    5) Lose the second <style>, that's garbage that has no business in your markup

    External stylesheets exist for a REASON, use them.

    6) Lose the border attribute, this isn't 1997.

    7) If you have TH that are column headings, they should be inside a <thead> with scope="col" on them.

    8) Stop using multiple echo to do one echo's job!

    9) Might be time to put the big boy pants on and stop using the outdated and overhead inducing procedural wrappers for mysqli.

    10) Ditch the double quotes, they're only making you work harder not smarter.

    11) avoid string addition on outputs, comma delimits are typically faster/cleaner

    Code:
    <h1>Below is a list of all reports!</h1> 
    <p>Note: You can click on a report to see it's own page!</p> 
    <?php 
    $con = new mysqli(
    	'localhost',
    	'reports',
    	'*****************',
    	'reports'
    ); 
    
    // Check connection 
    if ($con->connect_error) die(
    	'MySQL Connect Error (' . 
    	$con->connect_errno . ') '.
    	$con->connect_error
    ); 
    
    $result = $con->query('SELECT * FROM reports'); 
    
    echo '
    	<table id="reports"> 
    		<thead>
    			<tr>
    				<th scope="col">ID</th>
    				<th scope="col">Users IGN</th>
    				<th scope="col">Reported Players IGN</th> 
    				<th scope="col">Category</th> 
    				<th scope="col">Reason</th>
    			</tr>
    		</thead><tbody>';
    		
    $cells = [ 'id', 'reportsign', 'reportedplayersign', 'category', 'reason' ];
    
    while ($row = $result->fetch_array()) {
    	echo '
    			<tr>';
    	foreach ($cells as $cellIndex) echo '
    				<td><a href="index.php?id=', $row['id'], '">', $row[$cellIndex], '</a></td>';
    	echo '
    			</tr>';
    }
    			
    echo '
    		</tbody>
    	</table>';
    
    $con->close();
    You want a hover state to pretend the row is one giant link, do it on the "TR:hover TD {}", as @VIPStephen said, set the anchors to display:block and you SHOULD be good to go...

    Even so, I'd be tempted to just make the ID TH the only one with an anchor, and then enhance it with JavaScript for the click hunting down that first child anchor as the destination. Scripting off it gracefully degrades to just the normal anchor, scripting on it lets the whole row function. That's how a 'good' scripting approach would handle it by enhancing functionality, not replacing it or being the only means of handling it.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •