PHP / HTML / CSS Table scroll - php

I'm trying to implement my table with a scroll bar that will only how about 10 teams until it forces you to scroll down. However, I can't seem to get the coding right.
I'm planning on implementing the scrollable table across several different pages, in which the column headers will change in width. All the examples I have found required a fixed width for each column, is there a better way to do this?
** I want to keep fixed headers **
Here is my PHP code:
echo '<table align="center" cellspacing="3" cellpadding="3" width="80%" border="1">
<tr>
<th align="center">Team Name</th>
<th align="center">Wins</th>
<th align="center">Losses</th>
<th align="center">Winning %</th>
</tr><div id="scrll_tbl">';
$bg = '#eeeeee';
for($i = 0; $i < count($teams); $i++) {
$bg = ($bg == '#eeeeee' ? '#fffffff' : '#eeeeee');
$wnpctg = $teams[$i][1] / ($teams[$i][1] + $teams[$i][2]);
echo '<tr bgcolor="' .$bg. '">
<td align="center">' . $teams[$i][0] . '</td>
<td align="center">' . $teams[$i][1] . '</td>
<td align="center">' . $teams[$i][2] . '</td>
<td align="center">' . number_format($wnpctg,3) . '</td>
</tr>';
}
echo '</div></table>';
and here is my CSS:
#scrll_tbl {
overflow: scroll;
height: 100px;
}

You can't actually have a div tag inside a table (it will be rendered outside the table as an empty div). The only way to have a fixed header is to have two tables and the second table inside a scrollable div. If you want a flexible width for table cells, you can use JavaScript to check the width of the first row table cells of your data and set the header cell width accordingly.

Related

get a hidden table to appear with with a click with php

Im creating a simple School grade system using only php and I'm stumped of trying to figure out how to get a hidden table to appear below the main table when click on a "durchschnitt number"
Below is the code for the main table
<?php
if (!isset ($_SESSION['Saved_contacts']))
$Kontakte = array (
array ("Hr.", "Fruehauf", "Dennis", "13.02.2002", "Brucknerweg 34", 5212, "Hausen", '<u>3.6</u>'),
array ("Fr.", "Kaufmann", "Katharina", "04.03.2002", "Neubertbogen 24", 1680, "Romont", "Durchschnitt"),
array ("Hr.", "Fiedler", "Marcel", "08.16.2002", "Via Stazione 98", 8143, "Stallikon", "Durchschinitt"),
array ("Hr.", "Oster", "Tim", "08.26.2002", "Via delle Vigne 98", 1773, "Vuaty", "Durchschinitt"),
array ("Fr.", "Eichelberger", "Tanja", "07.22.2002", "Semperweg 6", 4223, "Blauen", "Durchschinitt"));
else
$Kontakte = $_SESSION['Saved_contacts'];
?>
<div style="width: 80%; min-width: 550px">
<h2>Kontakt des Schülers ...</h2>
<table>
<tr> <th>Nr.</th> <th>Anrede</th> <th>Name</th> <th>Vorname</th> <th>Geburtsdatum</th> <th>Adresse</th> <th>PLZ</th> <th>Ort</th> <th>Durchschnitt</th> </tr>
<?php
for ($i=0; $i < count($Kontakte); $i++) {
echo "<tr> <td><em>".($i+1)."</em></td>" . "<td style='text-align: center'>".$Kontakte[$i][0]."</td>" .
"<td>".$Kontakte[$i][1]."</td>" . "<td>".$Kontakte[$i][2]."</td>" . "<td>".$Kontakte[$i][3]."</td>" .
"<td>".$Kontakte[$i][4]."</td>" . "<td>".$Kontakte[$i][5]."</td>" . "<td>".$Kontakte[$i][6]."</td>" . " <td>".$Kontakte[$i][7]."</td
" . " <td><</tr>";
}
?>
</table>
As you can see in the first aray on the last line i made a link so that i'm able to click it.
Below is the hidden table I want to hide and reappear
<div class="Note">
<div style="width: 80%; min-width: 550px">
<table class="grade_Fruehauf" style="">
<tr>
<th>Fruehauf</th>
</tr>
<tr>
<th>Deutsch</th>
<th>3.5</th>
</tr>
<tr>
<th>Math</th>
<th>3.5</th>
</tr>
<tr>
<th>Biologie</th>
<th>3.5</th>
</tr>
<tr>
<th>Französisch</th>
<th>4</th>
</tr>
<tr>
<th>Durchschnitt</th>
<th style="border-top:solid;">3.6<th>
</tr>
</table>
<div>
</div>
Appreciate your help :)
If you want to use PHP only then you can use session, on clicking link set a session variable in a different file and redirect back, check that session variable and show/hide w.r.t it. (though JavaScript is preferable)
It's better to use javascript.
You just need to add the onlick attribute on the "durchschnitt number" td like
<td onclick="show('tableid');"></td>
and specify an id to the div or the table (es.: <table class="grade_Fruehauf" style="" id="example">.
Then you need a javascript code like this:
<script>
function show(tableid){
var x=document.getElementById(tableid);
if (window.getComputedStyle(x).visibility === "hidden") {
x.style.visibility = "visible";
}else{
x.style.visibility = "hidden";
}
}
</script>

Database rows not displaying fully in HTML table

I am attempting to display mySQL data in a HTML table through php. The first row is displaying correctly, however the other row sets are not being organised and displayed in my table, rather just echoing out at the bottom of the container with no structure.
I think that since the data is being displayed, albeit not in the table, that my query is correct, im just unsure on how to proceed.
Is this an issue with my table structure?
I tried adding a second:
echo '<td>' . $data['studentNumber'] . '</td><td>' . $data['handle'] . '</td><td>' . $data['email'] . '</td>';
underneath my first echo, but it just duplicated everything.
Here is the entire code in question: Screenshot Here
<div class="container-fluid">
<div class="row">
<div class="col-md details">
<p class="details_title"></p>
<?php
$getAllStudentsTable = "SELECT * FROM users WHERE accessLevel = 3";
$result = (mysqli_query($conn, $getAllStudentsTable));
echo '<table class="table">
<thead class="thead-dark">';
echo' <tr>
<th scope="col">Student Number</th>
<th scope="col">Handle</th>
<th scope="col">Email Address</th>
</tr>
</thead>'; //table headers
while ($data = mysqli_fetch_array($result)) {
echo' <tbody> <tr>';
echo '<td>' . $data['studentNumber'] . '</td><td>' . $data['handle'] . '</td><td>' . $data['email'] . '</td>';
echo'</tr> </tbody> </table>';
}
?>
Can anyone point me in the right direction on this?
(I am relatively new to PHP, SO and this is the first attempt ever at trying to display database data into an HTML table.)
I have attached a link for a screenshot of the issue (Not yet allowed to post pictures lol).
Thanks!
You're echoing most of the table structure in your loop, where you should just be echoding the rows. As a necessary debugging step, take a look at the View Source in your browser and see what the table structure is. You'll find multiple <tbody> elements and multiple closing </table> tags, confusing the browser.
Basically, remove the various <tbody> and <table> tags from your loop and just echo them around the loop. Something like this:
echo '<tbody>';
while ($data = mysqli_fetch_array($result)) {
echo '<tr>';
echo '<td>' . $data['studentNumber'] . '</td><td>' . $data['handle'] . '</td><td>' . $data['email'] . '</td>';
echo '</tr>';
}
echo '</tbody></table>';
All you want to repeat in the loop is each <tr> element and its children.

PHP - search_array

I have one Multiple Array...
File "user.php" --> imports the data from the "zebra_output_input.json" File and outputs a Zebra-Style Table with a list of all users and projects. One user can have more then one project, so it can have more then one line of text in the table (more then one array).
I have a sessions assigned to different users ("$loggedUser = $_SESSION["user"];") after the successful login, so I should now be able to filter the output so that only the data (lines of text - array) that matters for each user shows up.
Something like: first two lines (Arrays 0 and 1) gets User1, second one goes to the User2 ... last two ones for User5.
There is no databank involved in preprocessing the data. Right now, every user has its own JSON file (like it would be if the databank would give me the results). That's a bit impractical in this case since there is a project list for all users + one extra list for each and every user.
Some way to do it?
Array:
[{"Nr":"146","Kuerzel":"COUVERTIC","Projekttitel":"Arbeiten Output Management","Kunde":"COUVERTI","User":"User1"},{"Nr":"147","Kuerzel":"CEBILL","Projekttitel":"Vom PDF zur eRechnung","Kunde":"COUVERTI","User":"User1"},{"Nr":"157","Kuerzel":"KALAIDOS","Projekttitel":"Kurse bei Kalaidos","Kunde":"KFS","User":"User2"},{"Nr":"158","Kuerzel":"LPCH","Projekttitel":"Einsatz Harald M\u00fcller als Syst. Eng & W'Inform","Kunde":"LP","User":"User3"},{"Nr":"152","Kuerzel":"INFONOVA","Projekttitel":"PrintMachine","Kunde":"NEOPOST","User":"User4"},{"Nr":"1","Kuerzel":"AB","Projekttitel":"Allgemeine B\u00fcroarbeiten","Kunde":"INTERN","User":"User5"},{"Nr":"2","Kuerzel":"KA","Projekttitel":"Krank, Arzt","Kunde":"INTERN","User":"User5"}]
Processing file:
<?php session_start(); ?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>unbenannt</title>
<style>
table {background-color:white;}
th {background-color:#58ACFA;}
.cssEven {background-color:#E0ECF8;}
.cssOdd {background-color:#b8d3ef;}
</style>
</head>
<body>
<br><br>
<h1><img class="fehleranimation" src="../img/key36.png"> Willkommen im geschützten Bereich '<?= $_SESSION["user"]?>'.</h1>
<br><br>
<table>
<tr>
<th width="50" align="right">Nr</th>
<th width="150" align="left">Kuerzel</th>
<th width="350" align="left">Projekttitel</th>
<th width="150" align="left">Kunde</th>
<th width="100" align="center">User</th>
</tr>
<?php
$loggedUser = $_SESSION["user"];
//$userfile = file_get_contents('projekte_'.$loggedUser.'.json');
$userfile = file_get_contents('zebra_output_input.json');
$jsonarray = json_decode($userfile);
$index = count($jsonarray);
for ($i = 0; $i < $index; $i++) {
$style = "cssOdd";
//$_SESSION['user'] = $jsonarray[$i]->User;
if ($i % 2 != 0) {
$style = "cssEven";
}
if($loggedUser === $jsonarray[$i]->User) {
echo
'<tr class="'.$style.'">
<td align="right">'. $jsonarray[$i]->Nr.' </td>
<td>'. $jsonarray[$i]->Kuerzel.' </td>
<td>'. $jsonarray[$i]->Projekttitel.' </td>
<td>'. $jsonarray[$i]->Kunde.'</td>
<td align="center">'. $jsonarray[$i]->User.' </td>
</tr>';
}
}
?>
</table>
</body>
</html>
Edited
Some points to consider.
If you are fetching the data from the database do the filtering there and no need to fetch all the data and then filter in php.
If you are reading this array from some other source, like a file maybe, then just loop through each one of the array and check if the user matches the user stored in $_SESSION.
I think you're looking for an identifier.
You need to match the $_SESSION['user'] with the corresponding
$jsonarray[$i]->User.
Hope it helps!
$loggedUser = $_SESSION["user"];
$userfile = file_get_contents('projekte_'.$loggedUser.'.json');
$jsonarray = json_decode($userfile);
$index = count($jsonarray);
for ($i = 0; $i < $index; $i++) {
$style = "cssOdd";
if ($i % 2 != 0) {
$style = "cssEven";
}
if($loggedUser === $jsonarray[$i]->User) {
echo
'<tr class="' . $style . '">
<td align="center">' . $jsonarray[$i]->User . ' </td>
<td align="right">' . $jsonarray[$i]->Nr . ' </td>
<td>' . $jsonarray[$i]->Kuerzel . ' </td>
<td>' . $jsonarray[$i]->Projekttitel . ' </td>
<td>' . $jsonarray[$i]->Kunde . '</td>
</tr>';
}
}

how to populate dropdown list values from mysql and show it inside the td of html table

I am trying to populate dropdown list values from mysql and show it inside the td of html table,i tried with below code but it not populating values from mysql can any help me how to do that.
<table id="CPH_GridView1" style="width:1452px">
<thead>
<tr>
<th style=" width:102px">Clien ID </th>
<th style=" width:100px">Country</th>
<th style=" width:248px">Network Name </th>
<th style="text-align:center; width:102px" >cppn </th>
</tr>
</thead>
<tbody>
<?php
$sql = mysql_query("SELECT * FROM clientpricenotifications");
while($rows=mysql_fetch_array($sql))
{
if($alt == 1)
{
echo '<tr class="alt">';
$alt = 0;
}
else
{
echo '<tr>';
$alt = 1;
}
echo '<td id="CPH_GridView1_clientid" style="width:140px" class="edit clientid '.$rows["id"].'">'.$rows["clientid"].'</td>
<td id="CPH_GridView1_country" style="width:160px" class="edit country '.$rows['id'].'">'.$rows["country"].'</td>
<td id="CPH_GridView1_networkname" style="width:156px" class="edit networkname '.$rows["id"].'">'.$rows["networkname"].'</td>';
?>
<td>
<select name=' . customer_name . '>
<?php
$query = 'SELECT cppn FROM clientpricenotifications';
$result = mysql_query($query, $db) or die(mysql_error($db));
while ($row = mysql_fetch_assoc($result))
{
echo '<option value="' . $row['id'] . '"> ' . $row['cppn'] . '</option>';
}
?>
</select>
</td>
</tr>'
}
?>
There seems to be a problem with this line:
<td> <select name='customer_name'>
Shouldn't it actually say either this:
<td> <select name="customer_name">
Or:
<td> <select name=' . customer_name . '>
And, that line is part of an echo statement that contains a string in single-quotes, but I can't see where the echo statement's closing single-quote is.
As a result, I think a large bulk of your output is being ignored by the browser because the tag is not being closed properly as some of the output is getting mangled. Check your output with View Source!
If your above code is complete, then I would guess that you're missing the connection to the MySQL server. See: http://www.php.net/manual/en/function.mysql-connect.php
For a related question with code sample, check the answer at: Create table with PHP and populate from MySQL
Not asked, but your table has non matching column widths defined in the styles: Clien(t) ID header 102px, while data cells are 140px.
Another place to look for is following line:
<td style="width:65px" class=" '.$rows["id"].'">
I would expect it should be the following:
<td style="width:65px" class="<?php echo $rows["id"] ?>">
As Vexen Crabtree mentioned, if you also check/post the html code of the HTML output, it would make it easier to diagnose the problem.

Style a table row if one of its column attributes is true

I'm filling an HTML table with data from the following query:
$content_downloads = mysql_query( "SELECT
s.site, s.machine, d.projectid, d.directorySize, d.connectivityError,
d.blocked, d.blockedBy, d.blockedSince, d.errorString, d.dashboardTimeStamp
FROM rtcdb.site_machines s
LEFT JOIN rtcdb.downloadstatuses d
on (s.site = d.site and s.machine = d.machine)
where s.site in (select d2.site from rtcdb.downloadstatuses d2
where d2.dashboardTimeStamp > (SELECT DATE_ADD(max(dashboardTimeStamp),INTERVAL -1 DAY)
from rtcdb.downloadstatuses)) order by s.site, s.machine asc", $con) or die(mysql_error());
This query is going into an HTML table based on the following HTML/PHP:
<table>
<thead>
<tr>
<th>Site</th>
<th>Machine</th>
<th>Project ID</th>
<th>Folder Size</th>
<th>Error Description</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_assoc($content_downloads)) {
$error_string = "";
if ($row["connectivityError"] == true ) {
$error_string = "COULD NOT CONNECT: " . $row["errorString"];
}
elseif ($row["blocked"] == true ) {
$error_string = "BLOCKED BY LOCK OWNED BY: " . $row["blockedBy"] . " " . $row["blockedSince"];
}
echo '
<tr>
<td>'.$row["site"].'</td>
<td>'.$row["machine"].'</td>
<td>'.$row["projectid"].'</td>
<td>'.$row["directorySize"].'</td>
<td style = "text-align: left; color: red;">'.$error_string.'</td>
</tr> ';
}
?>
</tbody>
</table>
The error description column in this table rarely has contents. As you can see, when it does, a PHP conditional function (the if and ifelse functions) places a statement before the error description to make the description more understandable. One thing you may notice is that I am coloring the text of error descriptions red. The thing that I am struggling with that I need your help on is to selectively style an entire row with a background-color of yellow, when the error description cell in that row has a value. In other words, when the two conditionals I wrote are true, I would like to make the background-color of the row that includes that error description yellow.
It seems pretty simple, but I have tried various options and can't seem to figure it out. Any tips Stack Overflow?
Check if the error string is empty:
echo '
<tr' . (empty($error_string) ? '' : ' style="background-color:yellow;"') . '>
<td>'.$row["site"].'</td>
<td>'.$row["machine"].'</td>
<td>'.$row["projectid"].'</td>
<td>'.$row["directorySize"].'</td>
<td style = "text-align: left; color: red;">'.$error_string.'</td>
</tr> ';
What I would try is setting a class on the row of interest:
<tr class="highLight">
and then use CSS to set the background color of the cells in that row:
tr.highLight td {background-color: yellow; }
Set the class attribute is your error string has content.
Try this:
if($error_string != "")
{
echo '<tr class="error-row"';
}else{
echo '<tr>';
}
echo '<td>'.$row["site"].'</td>
<td>'.$row["machine"].'</td>
<td>'.$row["projectid"].'</td>
<td>'.$row["directorySize"].'</td>
<td style = "text-align: left; color: red;">'.$error_string.'</td>
</tr> ';
and add this to your stylesheet:
.error-row{background:yellow;}
if you want less code you can use the if shorthand too like this:
echo '<tr' . ($error_string == "" ? '' : 'class="error-row"') . '>
<td>'.$row["site"].'</td>
<td>'.$row["machine"].'</td>
<td>'.$row["projectid"].'</td>
<td>'.$row["directorySize"].'</td>
<td style = "text-align: left; color: red;">'.$error_string.'</td>
</tr> ';
Ok, I figured out what to do, and I apologize for not using jQuery or class attributes. I appreciate everyones help, and am being honest when I say that everyone's comments and answers helped me figure it out. Here's the solution:
if ($error_string != ""){
echo '
<tr style = "background-color: yellow;">
<td>'.$row["site"].'</td>
<td>'.$row["machine"].'</td>
<td>'.$row["projectid"].'</td>
<td>'.$row["directorySize"].'</td>
<td style = "text-align: left; color: red;">'.$error_string.'</td>
</tr> ';
}
else {
echo '
<tr>
<td>'.$row["site"].'</td>
<td>'.$row["machine"].'</td>
<td>'.$row["projectid"].'</td>
<td>'.$row["directorySize"].'</td>
<td style = "text-align: left; color: red;">'.$error_string.'</td>
</tr> ';
}
Thanks for everyone's help!

Categories