Make HTML table clickable

Hi all.

I have the following php file that displays records in the html table. I want to be able to have the end user be able to click a row, when they click any field in the row then it would open another page, let's say ViewDataEntry.php, and it will use the DataEntryID to look it up in mySQl and display it in ViewDataEntry.php. Any idea how I can do this?

Thank you in advance.

<?php 
// First we execute our common code to connection to the database and start the session 
require("common.php"); 
if(!$_SESSION['user']){ 
    header("Location: index.php"); 
    exit();
    } 
 
    $smt = $db->prepare("SELECT WorkScheduleDataEntry.DataEntryID,Builder, Community, Lot, Block, workscheduledescription, DATE_FORMAT(WorkScheduleDate,'%m/%d/%Y') As WorkScheduleDate  FROM WorkScheduleDataEntry INNER JOIN WorkScheduleType ON WorkScheduleDataEntry.workscheduletypeid = WorkScheduleType.workscheduletypeid INNER JOIN FieldSuperDataEntry ON FieldSuperDataEntry.DataEntryID = WorkScheduleDataEntry.DataEntryID INNER JOIN BuilderCommunity ON BuilderCommunity.BuilderCommunityID = FieldSuperDataEntry.BuilderCommunityID WHERE FieldSuperDataEntry.UserID = :user_id Order By Builder, Community, Lot, Block, WorkScheduleDate"); 
    $smt->execute(array(':user_id' => $_SESSION['user']['userid']));
    $data = $smt->fetchAll();
    
   echo "<div class='wrapper'>";
   echo "<div id='logo'></div>";
   echo "<form class='form3'>";
   echo"<div class='formtitle3'>Work Schedule</div>";
   echo"<table cellpadding='0' cellspacing='0' class='db-table' align = 'center'>
<tr>
<th>DataEntryID</th>
<th>Builder</th>
<th>Community</th>
<th>Lot</th>
<th>Block</th>
<th>Work</th>
<th>Schedule Date</th>
</tr>
<br>";

foreach ($data as $row)
  {
 
  echo "<tr>";
  echo"<td>" . html_escape($row['DataEntryID']) . "</td>";
  echo "<td>" . html_escape($row['Builder']) . "</td>";
  echo "<td>" . html_escape($row['Community']) . "</td>";
  echo "<td>" . html_escape($row['Lot']) . "</td>";
  echo "<td>" . html_escape($row['Block']) . "</td>";
  echo "<td>" . html_escape($row['workscheduledescription']) . "</td>";
  echo "<td>" . html_escape($row['WorkScheduleDate']) . "</td>";
  echo "</tr>";
  }
echo "</table><br></form></div>";
 
?>
<!DOCTYPE html>
<title>Work Schedule</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head> 

<body>
</body></html>

Open in new window

Sim1980Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

InsoftserviceCommented:
I hope you want to open other page when clicked on any fields of row

Add it in all row
 echo"<td><a href='http://yahoo.com'>" . html_escape($row['DataEntryID']) . "</a></td>";
0
InsoftserviceCommented:
echo"<td><a href='http://yahoo.com'>" . html_escape($row['DataEntryID']) . "</a></td>";
  echo "<td><a href='http://yahoo.com'>" . html_escape($row['Builder']) . "</a></td>";
  echo "<td><a href='http://yahoo.com'>" . html_escape($row['Community']) . "</a></td>";
  echo "<td><a href='http://yahoo.com'>" . html_escape($row['Lot']) . "</a></td>";
  echo "<td><a href='http://yahoo.com'>" . html_escape($row['Block']) . "</a></td>";
  echo "<td><a href='http://yahoo.com'>" . html_escape($row['workscheduledescription']) . "</a></td>";
  echo "<td><a href='http://yahoo.com'>" . html_escape($row['WorkScheduleDate']) . "</a></td>";
  echo "</tr><a href='http://yahoo.com'>";
0
COBOLdinosaurCommented:
You really should be using form elements for this.  I see a form declared, but there is nothing in it.  To use a table row you are going to have to have the id somehow associated with each row, or the cell containing it will need to have the innerHTML extracted, unless you also want to have an id on the cell with the id.

If we could have a link to the page it might provide us with insight into what you need.

Cd&
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
Personally, I'd just bind a javascript click event to each row. Hide the relevant DataEntryID in a data element so it's easy to grab.

foreach ($data as $row) {
    echo "<tr data-entryid='" . html_escape($row['DataEntryID']) . "'>";
    echo"<td>" . html_escape($row['DataEntryID']) . "</td>";
    ...
}

Open in new window

and some jQuery:

$(document).ready(function() {
   $('.db-table tr').click(function() {
      window.location.href = "ViewDataEntry.php?entryid=" + $(this).data('entryid');
   });
});

Open in new window

Your ViewDataEntry.php file will now receive a GET variable called entryid.

 If you take this approach, drop the form element - it serves no purpose.

FYI - the code you've attached puts all your code before the DOCTYPE!!
0
Sim1980Author Commented:
Thanks everyone. ChrisStanyon I did the following as per your answer (I temporarily just put an alert to make sure it's working before I make it go to the other php file). But it's not working, it doesn't show the pop-up when a field in the row is clicked.

<?php 
require("common.php"); 
if(!$_SESSION['user']){ 
    header("Location: index.php"); 
    exit();
    } 
 $smt = $db->prepare("SELECT WorkScheduleDataEntry.DataEntryID,Builder, Community, Lot, Block, workscheduledescription, DATE_FORMAT(WorkScheduleDate,'%m/%d/%Y') As WorkScheduleDate  FROM WorkScheduleDataEntry INNER JOIN WorkScheduleType ON WorkScheduleDataEntry.workscheduletypeid = WorkScheduleType.workscheduletypeid INNER JOIN FieldSuperDataEntry ON FieldSuperDataEntry.DataEntryID = WorkScheduleDataEntry.DataEntryID INNER JOIN BuilderCommunity ON BuilderCommunity.BuilderCommunityID = FieldSuperDataEntry.BuilderCommunityID WHERE FieldSuperDataEntry.UserID = :user_id Order By Builder, Community, Lot, Block, WorkScheduleDate"); 
    $smt->execute(array(':user_id' => $_SESSION['user']['userid']));
    $data = $smt->fetchAll();
?>
<!DOCTYPE html>
<title>Work Schedule</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<script>
$(document).ready(function() {
   $('.db-table tr').click(function() {
 alert('clicked!');
   });
});
</script>
</head> 

<body>
<div class="wrapper">
<div id='logo'></div>
<form class='form3'>
<div class='formtitle3'>Work Schedule</div>
<table cellpadding='0' cellspacing='0' class='db-table' align = 'center'>
<tr>
<th>Builder</th>
<th>Community</th>
<th>Lot</th>
<th>Block</th>
<th>Work</th>
<th>Schedule Date</th>
</tr>
<br>
 <?php foreach ($data as $row){
  echo "<tr dataentryid='" . html_escape($row['DataEntryID']) . "'>";
  echo "<td>" . html_escape($row['Builder']) . "</td>";
  echo "<td>" . html_escape($row['Community']) . "</td>";
  echo "<td>" . html_escape($row['Lot']) . "</td>";
  echo "<td>" . html_escape($row['Block']) . "</td>";
  echo "<td>" . html_escape($row['workscheduledescription']) . "</td>";
  echo "<td>" . html_escape($row['WorkScheduleDate']) . "</td>";
  echo "</tr>";
  }?> 
  </table><br></form></div>
</body></html>

Open in new window

0
InsoftserviceCommented:
@Sim1980 did you tried my code
0
Sim1980Author Commented:
insoftservice, I did here's how it looks. But my question is how do I carry dataentryid to that new php file ViewDataEntry.php. On the ViewDataEntry.php  file I went it to receive a GET variable called dataentryid.

<?php 
require("common.php"); 
if(!$_SESSION['user']){ 
    header("Location: index.php"); 
    exit();
    } 
 $smt = $db->prepare("SELECT WorkScheduleDataEntry.DataEntryID,Builder, Community, Lot, Block, workscheduledescription, DATE_FORMAT(WorkScheduleDate,'%m/%d/%Y') As WorkScheduleDate  FROM WorkScheduleDataEntry INNER JOIN WorkScheduleType ON WorkScheduleDataEntry.workscheduletypeid = WorkScheduleType.workscheduletypeid INNER JOIN FieldSuperDataEntry ON FieldSuperDataEntry.DataEntryID = WorkScheduleDataEntry.DataEntryID INNER JOIN BuilderCommunity ON BuilderCommunity.BuilderCommunityID = FieldSuperDataEntry.BuilderCommunityID WHERE FieldSuperDataEntry.UserID = :user_id Order By Builder, Community, Lot, Block, WorkScheduleDate"); 
    $smt->execute(array(':user_id' => $_SESSION['user']['userid']));
    $data = $smt->fetchAll();
?>


<!DOCTYPE html>
<title>Work Schedule</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head> 

<body>
<div class="wrapper">
<div id='logo'></div>
<form class='form3'>
<div class='formtitle3'>Work Schedule</div>
<table cellpadding='0' cellspacing='0' class='db-table' align = 'center'>
<tr>
<th>Builder</th>
<th>Community</th>
<th>Lot</th>
<th>Block</th>
<th>Work</th>
<th>Schedule Date</th>
</tr>
<br>
 <?php foreach ($data as $row){
  echo "<tr dataentryid='" . html_escape($row['DataEntryID']) . "'>";
 echo "<td><a href='ViewDataEntry.php?'>" . html_escape($row['Builder']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['Community']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['Lot']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['Block']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['workscheduledescription']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['WorkScheduleDate']) . "</a></td>";
 echo "</tr>";
  }?> 
  </table><br></form></div>
</body></html>

Open in new window

0
InsoftserviceCommented:
echo "<tr dataentryid='" . html_escape($row['DataEntryID']) . "'>";
  $dataentryid = html_escape($row['DataEntryID']);
 echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['Builder']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['Community']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'$dataentryid' >" . html_escape($row['Lot']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['Block']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['workscheduledescription']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['WorkScheduleDate']) . "</a></td>";
 echo "</tr>";


#This is the main concept

  $dataentryid = html_escape($row['DataEntryID']);
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['WorkScheduleDate']) . "</a></td>";
 echo "</tr>";
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sim1980Author Commented:
I tried the code below but it doesn't bring over the dataentryid:

<!DOCTYPE html>
<head>
<title>Work Schedule</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
</head> 

<body>
<div class="wrapper">
<div id='logo'></div>
<form class='form3'>
<div class='formtitle3'>Work Schedule</div>
<table cellpadding='0' cellspacing='0' class='db-table' align = 'center'>
<tr>
<th>Builder</th>
<th>Community</th>
<th>Lot</th>
<th>Block</th>
<th>Work</th>
<th>Schedule Date</th>
</tr>
<br>
<?php foreach ($data as $row){
  echo "<tr entryid='" . html_escape($row['DataEntryID']) . "'>";
 echo "<td><a href='ViewDataEntry.php?dataentryid=entryid'>" . html_escape($row['Builder']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['Community']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['Lot']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['Block']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['workscheduledescription']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid'>" . html_escape($row['WorkScheduleDate']) . "</a></td>";
echo "</tr>";
  }?> 
</table><br></form></div>
</body></html>

Open in new window

0
GaryCommented:
Chris's code above works fine. Try pasting the actual HTML here not your php code with his suggestion applied.
0
Sim1980Author Commented:
insoftservice, I tried your suggestion but it does not pass the dataentryid. By the way, dataentryid is of type int in the table.
<?php foreach ($data as $row){
  echo "<tr dataentryid='" . html_escape($row['DataEntryID']) . "'>";
echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['Builder']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid'>" . html_escape($row['Community']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid'>" . html_escape($row['Lot']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid'>" . html_escape($row['Block']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid'>" . html_escape($row['workscheduledescription']) . "</a></td>";
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid'>" . html_escape($row['WorkScheduleDate']) . "</a></td>";
 echo "</tr>";
  }?>

Open in new window

0
Sim1980Author Commented:
Got it to work. Here's a sample of the code that now sends the dataentryid over to the other php file:

echo "<td><a href='ViewDataEntry.php?dataentryid=". html_escape($row['DataEntryID']) ."' >". html_escape($row['Builder']) . "</a></td>";
0
Chris StanyonWebDevCommented:
The code you've just posted won't fire on the table click - it's basically just a normal link!! The answer you've accepted is horrible code!!

Insoftservice's code is wrong:

<tr dataentryid=''> <!-- there is no such attribute as dataentryid!!

If you're going to use data attributes then you need to do it like this:

<tr data-entryid='someValue'>

You can then grab it in jQuery using data('entryid')

If your dataentryid value is an integer then why are you trying to html_escape it??

The reason my code didn't work is because you need to include the jQuery library.
0
InsoftserviceCommented:
@ChrisStanyon please specify whats horrible in the code.
Why we are trying to complicate the code when it can done simply by php method just by some modifications.

"I want to be able to have the end user be able to click a row, when they click any field in the row then it would open another page"

Author just want to redirect it to other page if it clicks on any of its table fields.

"If your dataentryid value is an integer then why are you trying to html_escape it??"

No reason for it, but it might be just to be on safer side as per author


"<tr dataentryid=''> <!-- there is no such attribute as dataentryid!!"

please check $dataentryid has been already defined.
  $dataentryid = html_escape($row['DataEntryID']);

"Insoftservice's code is wrong:" please answer what was mistake in my code
0
Chris StanyonWebDevCommented:
@insoftservice - I just don't like ugly code - it's a personal thing ;)

I want the end user to click a row - exactly - instead they now click a cell in a table that potentially has hundreds, if not thousands of links going to the same place - search engines will just love that.

If there's no reason for escaping the data then why do it - it doesn't make it safer if there's no reason to do it in the first place. What exactly is the html_escape function anyway??

Your code is wrong because you are trying to give the TR an attribute called dataentryid. That's not how the data attributes work. Read my previous posts for an explanation. I can't actually see why you'd try that in your code anyway - doesn't seem to serve any purpose.
0
InsoftserviceCommented:
Author has written the code in core php and its always ugly :)

"I want the end user to click a row " that's not my comments its authors comments.
But i had given him to td as he meant the same.

I did not had any idea whether its number or characters. I told that author might have thought in that way, that he might get even characters


I hope you have not checked my code properly , I have assigned the value in

$dataentryid = html_escape($row['DataEntryID']);


  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['WorkScheduleDate']) . "</a></td>";
 echo "</tr>";

Where i have created attributes in TR ?
0
Chris StanyonWebDevCommented:
PHP doesn't need to be ugly!

Clicking a row is not the same as clicking a cell!

Where i have created attributes in TR ?
First line of your answer:

echo "<tr dataentryid='" . html_escape($row['DataEntryID']) . "'>";
0
InsoftserviceCommented:
Please check note  39534469.
Author has added that line getting confuse between js and php.

And check mine

#This is the main concept

  $dataentryid = html_escape($row['DataEntryID']);
  echo "<td><a href='ViewDataEntry.php?dataentryid=$dataentryid' >" . html_escape($row['WorkScheduleDate']) . "</a></td>";
 echo "</tr>";

I had just pasted up his old code.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.