Link to home
Start Free TrialLog in
Avatar of Sim1980
Sim1980

asked on

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

Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
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>";
Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
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'>";
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image
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&
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
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!!
Avatar of Sim1980
Sim1980

ASKER

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

Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
@Sim1980 did you tried my code
Avatar of Sim1980
Sim1980

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Sim1980
Sim1980

ASKER

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

Avatar of Gary
Gary
Flag of Ireland image
Chris's code above works fine. Try pasting the actual HTML here not your php code with his suggestion applied.
Avatar of Sim1980
Sim1980

ASKER

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

Avatar of Sim1980
Sim1980

ASKER

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>";
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
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.
Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
@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
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
@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.
Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
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 ?
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image
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']) . "'>";
Avatar of Insoftservice inso
Insoftservice inso
Flag of India image
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.