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";
}
}
}
}
Related
I got a homework that tells me to connect MySQL database to our PHP files and echo it in an HTML table. I managed to connect it, but my problem is I cannot style the table, the other element seems fine, so I think the stylesheet is linked properly.
This is my PHP ->
<div id="stats" class="stats">
<center><h2>Statistic.</h2></center>
<table>
<tr>
<th>Number</th>
<th>Degree</th>
<th>Institution</th>
<th>Graduate</th>
</tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "my_edu");
if ($conn -> connect_error) {
die("Connection Failed:". $conn -> connect_error);
}
$sql = "SELECT * FROM edu";
$result = $conn -> query($sql);
if ($result -> num_rows > 0) {
while ($row = $result -> fetch_assoc()) {
echo "<tr><td>". $row["number"] ."</td><td>". $row["degree"] ."</td><td>". $row["name"] ."</td><td>". $row["graduate"] ."</td></tr>";
}
}
else {
echo "0 result";
}
mysqli_close($conn);
?>
</table>
</div>
The table is printed, as you can see here
and this is the one that was supposed to style the table
.stats table{
width: 800px;
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
text-align: center;
}
/*STATISTIC*/
.stats{
width: 100%;
height: 600px;
background: #FFFFFF;
}
.stats h2{
padding: 50px;
font-weight: bold;
font-size: 40px;
}
.stats h3{
padding-top: 100px;
font-weight: bold;
font-size: 50px;
}
.stats table{
width: 800px;
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
text-align: center;
}
<div id="stats" class="stats">
<center><h2>Statistic.</h2></center>
<table>
<tr>
<th>Number</th>
<th>Degree</th>
<th>Institution</th>
<th>Graduate</th>
</tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "my_edu");
if ($conn -> connect_error) {
die("Connection Failed:". $conn -> connect_error);
}
$sql = "SELECT * FROM edu";
$result = $conn -> query($sql);
if ($result -> num_rows > 0) {
while ($row = $result -> fetch_assoc()) {
echo "<tr><td>". $row["number"] ."</td><td>". $row["degree"] ."</td><td>". $row["name"] ."</td><td>". $row["graduate"] ."</td></tr>";
}
}
else {
echo "0 result";
}
mysqli_close($conn);
?>
</table>
</div>
You have to apply css on table, thead,th,td ,tr. You'r applying css on which is parent div.
here's a example
*{
font-family:sans-serif;
}
table tr td,th:not(.th-head){
border-right: 1px solid blue;
}
table,tfoot{
border:1px solid #a8afcc;
word-break: break-all;
}
table:nth-of-type(1) caption {
font-weight: 800;
}
table {
border-collapse: collapse;
border-spacing:1rem 0.1rem;
table-layout:fixed;/*auto viene por defecto*/
width: 100%;
empty-cells: hide;
text-align:center
}
thead{
color:white;
background:rgb(25, 27, 151) ;
}
thead th{
/* border: none; */
}
table tbody tr:not(tfoot):nth-child(odd) {
background: #e1e6f8;
}
table tbody tr:nth-child(even) {
background: #c3cdff;
}
tr:not(.tr-head):hover{
background:rgb(130, 130, 130);
}
td:hover{
background:rgb(126, 126, 126);
}
td{
text-align: right;
}
th{
text-align:center;
}
<table >
<thead>
<tr class="tr-head">
<th class="th-head">Col 1</th>
<th class="th-head">Col 2</th>
<th class="th-head">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>300</td>
<td>2</td>
<td>600</td>
</tr>
<tr>
<td>1000</td>
<td>40</td>
<td>4000</td>
</tr>
</tbody>
</table>
<div id="stats" class="stats">
<h2>Statistic.</h2>
<table>
<tr>
<th>Number</th>
<th>Degree</th>
<th>Institution</th>
<th>Graduate</th>
</tr>
<?php
$conn = mysqli_connect("localhost", "root", "", "my_edu");
if ($conn -> connect_error) {
die("Connection Failed:". $conn -> connect_error);
}
$sql = "SELECT * FROM edu";
$result = $conn -> query($sql);
if ($result -> num_rows) {
while ($row = $result -> fetch_assoc()) {
?>
<tr>
<td><?= $row["number"] ?></td>
<td><?= $row["degree"] ?></td>
<td><?= $row["name"] ?></td>
<td><?= $row["graduate"] ?></td>
</tr>
<?php
}
}
else {
echo "0 result";
}
mysqli_close($conn);
?>
</table>
</div>
<link rel="stylesheet" href="yourStyleCode.css">
I went ahead and made a little tweak on your css
/*STATISTIC*/
.stats{
width: 100%;
height: 600px;
background: #FFFFFF;
}
.stats h2{
padding: 50px;
font-weight: bold;
font-size: 40px;
}
.stats th {
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
background-color: #0e76a7;
color: white;
}
.stats table {
width: 75%;
margin: auto;
border-radius: 9px;
padding: 3px;
text-align: center;
}
.stats td, .stats th {
border: 1px solid #ddd;
padding: 8px;
}
With the stats id you scoped your style. Means that if you style something inside the scope it have not affect on other part your website. But you need the right selectors to go inside the scope. .stats table tr {...} for example. In precompiled CSS like SASS etc. it quite easy to write the style. But this is only a note.
.scope {
tr, td { ... }
}
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
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
I've been working on a Library Management Sys in PHP.
It has a page (collect_fine.php) where I've been calling all the fields related to the each & every member from the DB in a loop.
Along with all the records, I'm also echoing a button to activate a modal on getting click.
The code is as below -
do{?>
<?php
$br_id = $row['Member_id'];
?>
<tr>
<td style="outline:1px dotted #000000" height="auto" width="80px" align="center"><?php echo $row['Member_id']?></td>
<?php
$mem_id = $row['Member_id'];
?>
<td style="outline:1px dotted #000000" height="auto" width="340px" align="justify"> <?php echo $row["Member_name"]?></td>
<td style="outline:1px dotted #000000" height="auto" width="130px" align="center"><?php echo $row['Class']?></td>
<td style="outline:1px dotted #000000" height="auto" width="150px" align="center"><?php echo $row['Contact']?></td>
<td style="outline:1px dotted #000000" height="auto" width="120px" align="center"><?php
$count=mysqli_query($conn,"SELECT COUNT(Book_id) AS total_things FROM issued_books WHERE Borrower_id = '$br_id' AND Date_returned = '0'");
$cnt = mysqli_fetch_array($count,MYSQL_ASSOC);
$num_results = $cnt["total_things"];
echo $num_results;
?></td>
<td style="outline:1px dotted #000000" height="auto" width="80" align="center"><?php echo $row['Fine_Amt']?></td>
<td style="outline:1px dotted #000000" width="120px" align="center">
<?php
date_default_timezone_set('Asia/Kolkata');
$date = date('Y-m-d H:i:s');
if($row['Fine_Amt']>0)
{
echo '<style>
#media screen {
#printSection {
display: none;
}
}
#media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
<button id="myBtn">Collect Fine</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>';
echo '<p><h1>NTHS eLibrary</h1></br>
<h2>Fine Reciept of '.$row['Member_name'].'</h2></br>
<div align="center">';
?>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<?php }while($row=mysqli_fetch_array($Result));?>
The above code works perfectly fine but only for the top row :(
What could possibly the reasons for this. Please help
In HTML, 'id' attribute should be unique. You are trying to set same 'id' to all buttons. Try to set button id dynamically.
I used the following code for showing suggestions wile typing. It's working well, but my other elements overlap the my search suggestion. How can I resolve this?
Code in <head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">
</script>
<script>
function suggest(inputString){
if(inputString.length == 0) {
$('#suggestions').fadeOut();
} else {
$('#country').addClass('load');
$.post("search.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').fadeIn();
$('#suggestionsList').html(data);
$('#country').removeClass('load');
}
});
}
}
function fill(thisValue) {
$('#country').val(thisValue);
setTimeout("$('#suggestions').fadeOut();", 600);
}
</script>
search.php:
<?php
include('inc/config.php');
include('inc/func.php');
$queryString=$_POST['queryString'];
if(isset($_POST['queryString'])) {
if(strlen($queryString) >0) {
$query = mysql_query("SELECT person_id,name,type,photo FROM person WHERE name LIKE '$queryString%' or person_id like '$queryString%' LIMIT 5");
if($query) {
echo '<ul>';
while ($result = mysql_fetch_array($query)) {
?>
<li>
<a href="view">
<table>
<tr>
<td>
<img src="<?php if($result['photo']=="0"){ echo "data/img/default.png";}else{ echo $result['photo'];}?>" width="60px" height="60px">
</td>
<td width="20px">
</td>
<td valign="top">
<h2><?php echo $result['name'];?></h2>
<h4><?php if($result['type']=='1'){echo "Staff";}elseif($result['type']=='2'){echo "Parent";}else{echo "Student";}?></h4>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td valign="top">
<h4>
<?php
if($result['type']=='3')
{
echo "Roll No: ".get_data('student','rollno',$result['person_id']);
}
?>
</h4>
<h4>
<?php
if($result['type']=='3')
{
$section_id=get_data('student','section_id',$result['person_id']);
$section_name=get_data('section','name',$section_id);
$class_id=get_data('section','class_id',$section_id);
$class_name=get_data('class','name',$class_id);
echo "Class: ".ucfirst($class_name)."(".$section_name.")";
}
?>
</h4>
</td>
</tr>
</table>
</a>
</li>
<?php
}
echo '</ul>';
} else {
echo 'sorry';
}
} else {
echo 'sorry';
}
} else {
echo 'There should be no direct access to this script!';
}
?>
CSS code:
#result {
height:20px;
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
color:#333;
padding:5px;
margin-bottom:10px;
background-color:#FFFF99;
}
#country{
padding:3px;
border:1px #CCC solid;
font-size:17px;
}
.suggestionsBox {
position: absolute;
left: 440px;
top:35px;
margin: 0px 0px 0px 0px;
width: 570px;
padding:0px;
background-color: #71a4e3;
border-top: 0px solid #000;
color: #ffffff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 6px;
border-bottom:3px solid #000;
cursor: pointer;
min-height:50px;
}
.suggestionList ul li:hover {
background-color: #ffffff;
color:#000;
}
.suggestionList a
{
background-color: #ffffff;
color:#000;
}
ul {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#fffff;
padding:0;
margin:0;
}
.load{
background-image:url(../img/ajaxLoader/loader01.gif);
background-position:right;
background-repeat:no-repeat;
}
#suggest {
position:relative;
}
Give your main content container a position:relative and a z-index:1...then, give your suggestion box a z-index:100 or higher. That should put your suggestions above other content on the page...if I'm understanding your need correctly.