Two tables align in different ways with the same stylesheet - php

I have two tables. One is created with html (and a little bit of php) while the other is created by two php-loops.
First of all, the stylesheet:
.statistics {
font-family: Arial, monospace;
font-size: 36px;
margin-left: 5%;
width: 90%;
}
.statistics tr {
line-height: 50px;
}
.statistics th {
text-align: center;
}
.statistics td {
text-align: center;
}
button {
margin-left: 25%;
width: 50%;
height: 40px;
border: none;
border-radius: 20px;
font-family: Arial, monospace;
font-size: 20px;
}
The following table is aligned properly:
<table class="statistics">
<tr>
<th>Benutzer</th>
<th>Artikel</th>
<th>Reservierungen</th>
</tr>
<tr>
<td><?php echo $client->statistic_getAmount();?></td>
<td><?php echo $articles->statistic_getAmount();?></td>
<td><?php echo $reservations->statistic_getAmount();?></td>
</tr>
<tr>
<th>Seiten (.php)</th>
<th>Datenbankeinträge</th>
<th>Zeilen mit Code</th>
</tr>
<tr>
<td>18</td>
<td>27</td>
<td>4407+</td>
</tr>
</table>
While this one isn't aligned properly:
<form method="post" action="webinterface.php" class="perms">
<table class="statistics">
<tr>
<th>Benutzer</th>
<?php
foreach ($permgroupa as $group) {
echo "<th>".$group."<th>";
}
echo "</tr>";
$users = $client->getUsers();
while ($row = mysqli_fetch_assoc($users)) :?>
<tr>
<td><?php echo $row['username'];?></td>
<?php foreach ($permgroupa as $group) : ?>
<td><input type="checkbox" name="<?php echo $group;?>-<?php echo $row['username'];?>" <?php if ($perms->hasPermission($row['username'], $group)) {echo "checked";}?>></td>
<?php endforeach;?>
</tr>
<?php endwhile;?>
</table><button type="submit" class="btnalter" name="alterrights">Rechte aktualisieren</button></form>
The tables in action
Does someone know, why they align in different ways?

1 - don't put your table inside a form
2 - the number of columns is not the same for the first and the second table

Related

Create search function on multiple tables with javascript

I am a new developer. I am now doing a search function for multiple tables. The issue is when I search it only appears the jobname but not the whole information in the same table. The output is supposed to show the work information together with the jobname searched. I hope you guys can help me. Thank you in advance !! Below is my current output before & after search with codes attached.
Before search
After search
Codes
<!DOCTYPE html>
<html>
<head>
<title>My Job</title>
<script>
//searching
function myFunction() {
var input, filter, table, tr, td, i,alltables;
alltables = document.querySelectorAll("table[data-name=mytable]");
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
alltables.forEach(function(table){
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none"
}
}
}
});
}
</script>
<link rel="stylesheet" type="text/css" href="joblist.css">
</head>
<body><br>
<div class="title">
<center>APPLY JOB<center>
</div><br>
<ul align="center">
<li>HOME</li>
</ul>
<br><br>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search your job" class="carian">
<br><br>
<ol>
<?php
include("DB.php");
$query = "SELECT * FROM createjob";
$result = mysqli_query($link,$query);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while ($row = mysqli_fetch_assoc($result)){
$id = $row["id"];
$jobname = $row["jobname"];
$jobtime = $row["jobtime"];
$jobday = $row["jobday"];
$venue = $row["venue"];
$worker = $row["worker"];
$inform = $row["inform"];
$phonenum = $row["phonenum"];
?>
<fieldset class="box" >
<table data-name="mytable">
<tr>
<th align="left">Job Name </th>
<td><?php echo $jobname ; ?></td>
</tr>
<tr>
<th align="left">Job Time </th>
<td><?php echo $jobtime; ?></td>
</tr>
<tr>
<th align="left">Job Day </th>
<td><?php echo $jobday; ?></td>
</tr>
<tr>
<th align="left">Venue </th>
<td><?php echo $venue; ?></td>
</tr>
<tr>
<th align="left">Number Of Worker </th>
<td><?php echo $worker; ?></td>
</tr>
<tr>
<th align="left">Phone Number </th>
<td><?php echo $phonenum; ?></td>
</tr>
<tr>
<th align="left">Information </th>
<td><?php echo nl2br($inform);?></td>
</tr>
</table>
<br>
<button class="bottom">Apply</button>
</fieldset>
<?php
}
}else {
echo "0 results";
}
?>
</ol>
</body>
</html>
body{
background-image: linear-gradient(rgba(0, 0, 0, 0.45),
rgba(0, 0, 0, 0.45)), url("16.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
border-collapse: collapse;
}
thead{
background-color: #FFD34E;
}
.bottom{
background-color: #FFD34E;
border-radius: 4px;
height: 30px;
padding-top: 5px;
width: 100px;
border: none;
}
.box
{
background-color:white;
border-radius: 10px;
float:left;
width:320px;
border-style: outset;
bottom:10px;
}
.carian{
position: relative;
left:55px;
height:20px;
width: 190px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: white;
background-image: url('18.png');
background-position: 7px 0px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.carian:focus {
width: 20%;
}
.title{
font-weight:bold;
font-size:40px;
color:white;
text-shadow: 4px 4px black;
}
.bottom
{
background-color: #FFD34E;
border-radius: 4px;
height: 30px;
padding-top: 5px;
border: none;
width:100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #FFD34E;
position: -webkit-sticky; /* Safari */
position: sticky;
width: 100%;
}
li {
float: center;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px 340px;
text-decoration: none;
}
li a:hover {
color: white;
background-color:#552B00;
}
This is maybe a better way to create your table:
<fieldset class="box">
<table id="myTable" data-name="mytable">
<thead>
<tr>
<th>Job Name</th>
<th>Job Time</th>
<th>Job Day</th>
<th>Venue</th>
<th>Number Of Worker</th>
<th>Phone Number</th>
<th>Information</th>
<th></th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)): ?>
<tr>
<td><?= $row["jobname"]; ?></td>
<td><?= $row["jobtime"]; ?></td>
<td><?= $row["jobday"]; ?></td>
<td><?= $row["venue"]; ?></td>
<td><?= $row["worker"]; ?></td>
<td><?= $row["inform"]; ?></td>
<td><?= $row["phonenum"]; ?></td>
<td>
<button class="bottom">Apply</button>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</fieldset>
With a normal table like this your able to use the search function from w3schools:
https://www.w3schools.com/howto/howto_js_filter_table.asp
I also made an extended version of the example from w3schools. This function will search in all td fields:
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
var tds = tr[i].getElementsByTagName("td");
console.log(tds.length);
var found = false;
for (var ii = 0, c = tds.length; ii < c; ii++) {
var td = tds[ii];
if (td && found == false) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
found = true;
} else {
found = false
}
}
if (found) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

getting my db table into html table gets no results

this is my first post and im already totally confused about my project right now :x
im able to make a successful connection to the sql db and also receive my data which displays on the top left, BUT its supposed to display in a html table, not somewhere on the screen :O
Here is the website to see the code in action, though there is none yet!
http://blackskill.square7.ch/
Here is the code which is running fine, but maybe im just too stupid and new for coding yet xd
<!DOCTYPE html>
<?php
$connection=mysqli_connect("localhost","username","password","db_name");
if ($connection) {
echo "database online <br>";
} else {
die("Connection failed. Reason: ".mysqli_connection_error());
}
$sql="SELECT * FROM blackskill_playerdb";
$results=mysqli_query($connection,$sql);
if (mysqli_num_rows($results)>0) {
while($row=mysqli_fetch_array($results)) {
echo '<tr>
<td>'.$row[0].'</td>
<td>'.$row[1].'</td>
<td>'.$row[2].'</td>
<td>'.$row[3].'</td>
</tr>';
echo "<br>";
}
}
mysqli_close($connection);
?>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 20%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2><center>Inofficial S.K.I.L.L. - Special Force 2 - Dishonor List</center></h2>
<input type="text" id="myInput" onkeyup="aa" placeholder="Search for player..." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:40%;">Player</th>
<th style="width:20%;">Clan</th>
<th style="width:20%;">Evidence</th>
<th style="width:20%;">Added to list</th>
<?php while($row=mysqli_fetch_array($results)) : ?>
<tr>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['clan']; ?></td>
<td><?php echo $row['rulebreak']; ?></td>
<td><?php echo $row['addlist']; ?></td>
</tr>
<?php endwhile ?>
</tr>
</table>
<tbody>
</body>
</html>
i hope we can find an answer together with friendship, emotions and friendship!
regards

How to fix the value from php to use bootstrap?

I am using bootstrap accordion style to show the list of speakers in our website.
For that, I have a list of speakers table in my database. And I am getting the fields using php. In the following way.
<?php
global $wpdb;
$result = $wpdb->get_results( "SELECT * FROM `Invited_Speakers`");
foreach ( $result as $print ) { ?>
<tr style="width:100%">
<div class="maindrop" style="float: left; text-align: justify;">
<a class="bar" style="text-decoration: none;" href="#<?php echo $print->Last_Name;?>"> <?php echo $print->First_Name; ?> <?php echo $print->Last_Name; ?>, <?php echo $print->Institue_Address; ?>
</a>
<div id="<?php echo $print->Last_Name;?>" class="dropbox">
<img style="border-radius: 10%; padding: 10px; float: left;" src="<?php echo $print->Image_link;?>" alt="" width="20%" align="left" />
<table style="width:79%;float: right;">
<tbody>
<td > <?php echo $print->Designation;?> </td>
</tr>
<tr>
<td ><?php echo $print->Department_Address;?></td>
</tr>
<tr>
<td> Email Id: <?php echo $print->Email_Id;?></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td >Research Interests</td>
<td>:</td>
<td> <?php echo $print->Research_Interests;?> </td>
</tr>
<tr>
<td>
Achievements
</td>
<td> : </td>
<td><?php echo $print->Acheivements;?>
<button style="float:right;"><a style="color: white;" href="<?php echo $print->Home_page_Link;?>" target="_blank" rel="noopener"> More Info </a> </button>
</td>
</tr>
</tbody>
</table>
</div>
<?php }
?>
It has given me as expected, but the problem is,
when I click the bar, it should show me the dropbox which contains the details of the speaker. But it is not showing.
It seems like the link is not available.
How to rectify this??
I have around 60 speakers and for everybody, writing html code manually does not sound like good idea.
Link of the page is given here: Click here
In the above link, the problem is with the invited speakers list.
Thanks in advance
CSS:
.maindrop {
width: 100%;
}
.bar {
padding: 0px;
display: block;
border-bottom:1px solid #06394D;
text-decoration: none;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
font-weight:300;
transition: .5s ease-out;
}
.bar:hover {
background: #F6F7F7;
padding: 15px;
text-decoration: none;
}
.dropbox {
max-height: 0;
transition: .2s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 5000px;
}
Assuming you're using Bootstrap 3, '.dropbox' does not exist as a class. What I believe you're looking for is an Accordion, which can be found under the Collapse documentation section.
Here is a little sample that should get you started in the right direction. The $count is there to make sure each row has a unique identifier to open it's associated accordion. I simplified the markup from which you have but you should be fine replacing with what you need.
<table style="width:100%">
<?php
$count = 0;
foreach($result as $print): ?>
<tr data-toggle="collapse" href="#collapseExample-<?php echo $count; ?>" aria-expanded="false" aria-controls="collapseExample-<?php echo $count; ?>">
<td>Speaker Name</td>
<td>Speaker Description</td>
</tr>
<tr class="collapse" id="collapseExample-<?php echo $count?>">
<td>This should be hidden</td>
</tr>
<?php $count++; endforeach; ?>
</table>

make html table <thead> fixed while scroll in dynamic <tbody> in php

I have dynamic table in php where <tbody> content dynamically fetched from database, i want to make <thead> fixed while scroll, my code work fine in static html <tbody>.
Here is my code
<div class="data">
<table>
<thead>
<tr>
<th>Page Id</th>
<th>User Id</th>
<th>Page Title</th>
</tr>
</thead>
<?php
foreach($this->analysisL as $key => $value) {?>
<tbody>
<tr>
<td><?php echo $value['daily_clicks']?></td>
<td><?php echo $value['RDCL']?></td>
<td><?php echo $value['SDCL']?></td>
</tr>
</tbody>
<?php }?>
</table>
</div>
Here is my css
body{
font-family: sans-serif;
}
h1{
font-size: 2em;
}
p{
margin-top: 1em;
}
div{
padding: 0 50px
}
.data{
position: fixed;
top: 0;
z-index: 0;
}
.content{
position: relative;
background: #fff;
z-index: 1;
padding: 50px;
}
th,td{
width: 200px;
padding: 3px;
}
th{
background: #ccc;
}
My Goal is to make table head fixed position while scroll and the content of table body dynamic fetching from database using php loop
I recommend you to use 'head fixer' js library (https://github.com/lai32290/TableHeadFixer)
fast and easy way to make table head/foot fixed.

Different sized rows in tables populated by php

So I made this div that is populated by php calls to my server to populate it with a table per entry in the Server table. Aka, a php script connects to my server, checks how many entries there are, and creates a table for each one to populate the div. So in the end there are several table entries displayed corresponding to each entry in the database.
I don't know of a jsfiddle/codepin type place that allows php since it's server-side so I took a picture to show what it looks like. The arrows are pointing to the two entries where the box they are in is wider than the others. This happens any time I do not include a link (an optional entry in the database). I assume this is because it is trying to fill the space left by having no link in the last table row, but the last part of my php script should have removed that last row if it was empty (assuming I wrote it correctly) and it shouldn't need to stretch to fill something no longer there.
So, what I'm asking here is how do I make each of the orange rows the same size?
Picture of the box: http://i67.tinypic.com/5k3nzs.png
HTML (Relevant portion)
<div id="announcements_box">
<h2>Announcements</h2>
<?php include "scripts/php/getAnnouncement.php";?>
<div class="bottom_color"></div>
</div> <!--end announcement_box-->
CSS (Relevant portion)
#announcements_box{
table-layout: fixed;
display: inline-block;
background-color: #FFFFFF;
width: 47%;
color: black;
margin-left: 1rem;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#announcements_box h2{
font-weight: normal;
font-size: 2rem;
background-color: navy;
color: white;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.announcement_blocks{
width: 100%;
margin-bottom: .5rem; /* space after each block */
background-color: #C0C0C0;
}
.announcement_blocks img{
/* height: 75px; */
width: 75px;
margin: .5rem;
padding-top: 1rem;
}
.announcement_blocks td{
/* word-wrap: break-word;
word-break: break-all;
*/
}
.announcement_blocks td.title{
text-align: center;
background-color: #E18A07;
font-weight: bold;
}
.announcement_blocks td.descr{
padding-left: 1rem;
padding-right: 1rem;
}
.announcement_blocks td.link{
text-align: center;
/*
padding-left: 1rem;
padding-right: 1rem;
*/
}
.announcement_blocks td.img_s{
width: 1rem;
background-color: #330000;
}
.bottom_color{
height: 2.5rem;
background-color: navy;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
margin-top: -.5rem;
}
PHP (Relevant portion)
<?php require "scripts/php/database_connect.php"?>
<?php
$query = mysqli_query($con, "SELECT * FROM Announcements") or die("Error in query. Details: ".mysqli_error());
while($row = mysqli_fetch_assoc($query))
{
?>
<table class="announcement_blocks">
<tr>
<td class="img_s" rowspan="3"><?php echo "<img src='/img/announcement_icon/announcement_imp.png" . "' alt='announcement'>";?></td>
<td class="title"><?php echo $row['title']; ?></td>
</tr>
<tr>
<td class="descr"><?php echo $row['description']; ?></td>
</tr>
<?php if($row['link'] != "")
{
?>
<td class="link"><?php echo $row['link']; ?></td>
<?php
}
?>
</table>
<?php
}
?>
I know this is long and probably a bit confusing since I can't just hand you a fiddle or codepin to toy with but any ideas?
Thanks
In bottom if links are there its working, if not there its height increased.
to avoid this you can give
<?php if($row['link'] != ""){?>
<?php echo $row['link']; ?>
<?}else { echo "<br>";}?>
Try to use this php code:
<?php
$query = mysqli_query($con, "SELECT * FROM Announcements") or die("Error in query. Details: ".mysqli_error());
while($row = mysqli_fetch_assoc($query)){?>
<table class="announcement_blocks">
<tr>
<td class="img_s" rowspan="3"><?php echo "<img src='/img/announcement_icon/announcement_imp.png" . "' alt='announcement'>";?></td>
<td class="title"><?php echo $row['title']; ?></td>
</tr>
<tr>
<td class="descr"><?php echo $row['description']; ?></td>
</tr>
<tr>
<td class="link">
<?php if($row['link'] != ""){?>
<?php echo $row['link']; ?>
<?}?>
</td>
</tr>
</table>
<?}?>

Categories