I am making a table in which PHP is used in <td> tags. This contains a list of products and their prices. On the top of the table, I have inserted two buttons, one for arranging data in ascending order of price, and the other one is for descending order.
By default, the data is in ascending order. When I click on the descending order button, it works but with of the table data changes which is not required.
Here is my CSS code:
a {text-decoration:none; color:#0000FF;}
#hold .log {
color:#0000FF;
text-align:center;
font-size:20px;
}
h2 {color:#0000FF;}
#left { width:200px;border:1px;border-style:solid;margin:0 auto;margin-top:20px;text-align:center;border- color:#0000FF;float:left;}
#left div {border:1px;border-style:solid;border-color:#0000FF;}
#left div a {}
.style table {border:1px;border-style:solid;border-color:#0000FF;}
.style table tr td {border:1px;border-style:solid;border-color:#0000FF;color:#333;width:250px;}
.style table tr td input,select,textarea {width:250px;height:30px;}
Here is the code for the table:
<button onclick="as()">Ascending Order</button>
<button onclick="ds()">Descding Order</button>
<div class="style">
<table>
<tr>
<td>Title</td>
<td>Price</td>
</tr>
<th><h2 style="text-align:left;">Cameras</h2></th>
<tr>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price ASC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr id='cam_as'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</tr>
<tr>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price DESC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr id='cam_ds' style='display:none;'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</tr>
</table>
</div><!-- style ends-->
Finally, here is the script which is doing this all required work:
<script type="text/javascript">
function as()
{
$('#cam_as,#com_as,#cell_as').css('display','block');
$('#cam_ds,#com_ds,#cell_ds').css('display','none');
}
function ds()
{
$('#cam_ds,#com_ds,#cell_ds').css('display','block');
$('#cam_as,#com_as,#cell_as').css('display','none');
}
</script>
I have tried but I am unable to find where I am going wrong.
Yoo have enough problems with your code. I removed extra < tr >'s. I added classes and changed javascript functions accordingly. Your problem is mainly in nested < tr >'s
http://jsfiddle.net/Sanya_Zol/kC9Tk/
<button onclick="as()">Ascending Order</button>
<button onclick="ds()">Descding Order</button>
<div class="style">
<table>
<tr>
<td>Title</td>
<td>Price</td>
</tr>
<th><h2 style="text-align:left;">Cameras</h2></th>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price ASC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr class='cam_as'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
<?php $i=1;
$qry_cam=mysql_query("SELECT* FROM camera ORDER BY camera.price DESC",$con);
while($row=mysql_fetch_array($qry_cam))
{
echo "<tr class='cam_ds' style='display:none;'>
<td>$i-$row[title]<br /></td>
<td>$row[price]<br /></td>
</tr>";
$i++;
}
?>
</table>
</div>
<script type="text/javascript">
function as(){
$('.cam_as,#com_as,#cell_as').show();
$('.cam_ds,#com_ds,#cell_ds').hide();
}
function ds(){
$('.cam_ds,#com_ds,#cell_ds').show();
$('.cam_as,#com_as,#cell_as').hide();
}
$(as); // run as() when document ready
</script>
There are <tr>Tag outside and inside the loop, you only need them one time.
The loop would also create multiple <tr> Tags with the same ID, thats not correct. Try to use jQuery-Toggle to show/hide the elements.
The last part of the question is not clear for me, sorry.
Related
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>
Now I wish to construct a list of tables under nested while loop and if-else condition with PHP, the format of the code is as below:
while(){
if (){
..... // extract the data
while(){
construct a table using the data extracted above
}
}
elseif (){
..... // extract the data
while(){
construct a table using the data extracted above
}
}
}
Specifically, in the inner while loop the code is:
while ( $chat = mysqli_fetch_assoc($chatQ))
{
echo
"<table class='table table-hover' >"
."<td>"
.$conver['sender_name']."\t".$chat['sender']."\t".$chat['send_time']."\t".$chat['content']
."</td>"
."<td>"
."<form id='join' action='group_chat.php' method ='POST' accept-charset='UTF-8'>"
// post the group id
."<input type='hidden' name='group_id' id='group_id' value=".$conver['sender_id']."/>"
."<button class='btn btn-default' type='submit'>Enter</button>"
."</form>"
."</td>"
."</table>";
}
But the result is very ugly:
The problem is that the Enter button is associated with each message. But what I want is that after displaying all the messages, there is a Enter button which can direct to the specific group. But I don't know how to separate the code. Could you please do me a favor? Thanks in advance!
You can do something like this:
<?php
$counter = 0;
echo '
<form>
<table>';
while ( $chat = mysqli_fetch_assoc($chatQ)){
$counter++;
echo '
<tr>
<td>
group_id_'.$counter.'
</td>
<td>
<input name="group_id_'.$counter.'" value="'.$conver['sender_id'].'">
</td>
</tr>';
}
echo '
<tr>
<td colspan="2">
<button type="submit">Enter</button>
</td>
</tr>
</table>
</form>';
?>
Also you dont have to limit yourself to echo everything in order by setting variables. See example below:
<?php
$counter = 0;
$data = NULL;
while ( $chat = mysqli_fetch_assoc($chatQ)){
$counter++;
$data .='
<tr>
<td>
group_id_'.$counter.'
</td>
<td>
<input name="group_id_'.$counter.'" value="'.$conver['sender_id'].'">
</td>
</tr>';
}
echo '
<form>
<table>'.$data.'
<tr>
<td colspan="2">
<button type="submit">Enter</button>
</td>
</tr>
</table>
</form>';
?>
So I want to do something very simple, which I can't figure out properly. I'm currently making a forum and where I normally have errors (the back end) it all works now, probably through the black magic I used ;D,
So now, the thing is: I want to show all my subcategories, so I'm using the following table:
<div id="content_big">
<div class="content_top_oranje">
<p class="koptekst">
<?php echo 'Name';?>
</p>
<p style="float:left; margin-left:70%; margin-top:-30px; color:#fff; font-size:11px;font-family:Ubuntu;">
<?php echo 'Description';?>
</p>
</div>
<div class="content_mid">
<?php $kop='algemeen' ;
$query=$ db->conn->prepare("SELECT * FROM ht_forum_categorien WHERE kop = ?");
$query->bind_param('s', $kop);
$query->execute();
$result = $query->get_result();
while ($row = $result->fetch_assoc()) { ?>
<table style="width:100%;" border="1" cellspacing="0">
<tr>
<td>
<?php echo $row[ 'name']; ?>
</td>
<td style="margin-left:50px;">
<?php echo $row[ 'description]; ?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</div>
But when I use that, this is the output I get:
How is it possible that all of the rows won't vertically align? And how to solve it?
Thanks. (I'm sorry the screenshot is in dutch, but I can't change the values in the DB, since it isn't mine
You have two fairly big problems in your code:
most importantly, and the problem you ran into: you're not generating a table. You're generating lots of tables. If you want one table, move your <table> and </table> tags outside of your loop and only generate <tr> with their content in your while loop.
a problem you didn't realise you had: the HTML you're using isn't faithful to the promise that your markup is semantic: that heading should be a heading element (h1, h2, h3, what have you), and as a table, really this shouldn't be divs and p and table at all, this should be a single table, with a heading row, styled as your heading, and then data rows.
So let's rewrite this to something that makes sense both from a PHP and from an HTML perspective:
<?php
...query your data. Do this first...
$result = ...;
if($result isn't empty) {
?>
<table>
<?php
echo "<thead><th>$kop</th><th>$description</th></thead>";
?>
<tbody>
<?php
while ($row = $result->fetch_assoc()) {
$name = $row['name'];
$desc = $row['description'];
echo "<tr><td>$name</td><td>$desc</td></tr>\n";
}
?>
</tbody>
</table>
<?php } ?>
So don't do the querying inside the table, do it first, then if there are results to show, decide whether or not to write the single table, generating the dynamic content in the tbody as table rows. And use CSS to style the thead cells the way you need.
For that matter, don't use all those inline style="..." bits. They're all identical, so you're just needlessly repeating static CSS. Use class="rowclass" or whatever name you think is appropriate, and then in your stylesheet or <style> block, define
.rowclass {
background-color: ...;
color: ...;
...
}
Try this
<div id="content_big">
<div class="content_top_oranje">
<p class="koptekst">
<?php echo 'Name';?>
</p>
<p style="float:left; margin-left:70%; margin-top:-30px; color:#fff; font-size:11px;font-family:Ubuntu;">
<?php echo 'Description';?>
</p>
</div>
<div class="content_mid">
<?php $kop='algemeen' ;
$query=$ db->conn->prepare("SELECT * FROM ht_forum_categorien WHERE kop = ?");
$query->bind_param('s', $kop);
$query->execute();
$result = $query->get_result();
?>
<table style="width:100%;" border="1" cellspacing="0">
<?php while ($row = $result->fetch_assoc()) { ?>
<tr>
<td>
<?php echo $row[ 'name']; ?>
</td>
<td style="margin-left:50px;">
<?php echo $row[ 'description']; ?>
</td>
</tr>
<?php
}
?>
</table>
</div>
</div>
first I want to say that this question is related to jquery replacewith to get data with Ajax after click on a cell and if this against the rule I am sorry and delete this post.
I tried to get the value of a cell in a MySQL-generated table (with fetch_array). I want to click on a cell in the same and receive the value of the first cell in the row in a div-container.
Thanks to several entries here I found an example for "static" tables. Like this:
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td class="use-address">
Use
</td>
</tr>
<tr>
<td id="chip" class="nr">49</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address">Use</button>
</td>
</tr>
</tbody>
</table>
<br><br>
<div id="glasgow">Hello</div>
and
$("#chip").click(function () {
var scotland = $(this).closest("tr").find(".nr").text();
$("#glasgow").html(scotland);
});
http://jsfiddle.net/FnDvL/231/
Works fine. I insert this to my file, php, and get table data from mysql.
This is my code:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?
$con = mysqli_connect('localhost','root','','boerse');
$sql="SELECT short, name FROM markets";
$result = mysqli_query($con,$sql);
?>
<div class="markets">
<?
echo "<table>
<thead border='0'>
<tr>
<th>Index</th>
<th>Name</th>
</tr>
</thead>
<tbody border='1'>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td class='nr'>" . $row['short'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td class='information'>Use</td>";
echo "</tr>";
}
echo "</tbody></table>";
?>
<div class="clicked_info">Hello</div>
</div>
<br><br>
</body>
</html>
Now my problem is that I can click on the td with class information, but div class 'clicked_info' doesn't change. But I did like in the fiddle. So what went wrong? Or where is the problem? It must have to do with the MySQL-matter. But why?
This way I want to check if I got the content from the cell and I can continue working with it (as seen in my post before).
Maybe anyone can help. And again I am sorry if I break rules here.
Thank you to everyone.
You need to wrap your code in document-ready handler
$(document).ready(function () {
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
});
Currently when your script executes there is no $(".information") thus event is not binded properly.
OR
Move your script at the bottom of your page. like
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
</body>
OR
You can use event-delegation
$(document).on("click", ".information",function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
i have this code:
<?php
$i=5;
while($i > 0){
echo '
<table width="500px" border="1">
<tr>
<td>
<button id="button">Show comments</button>
</td>
</tr>
<tr>
<td id="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<script type="text/javascript">
$("#button").toggle(
function (){
$("#button").text("Hide Comments");
document.getElementById("comments").style.display="inline";
},function (){
$("#button").text("Show Comments");
document.getElementById("comments").style.display="none";
}
);
</script>
<script type="text/javascript" src="jquery.js"></script>
';
$i--;
}
?>
When the show comments button is clicked the comment box should show up. It works for the first one. But it doesn't work for the others.What's wrong?
I'd just escape the php interpreter and print the HTML markup directly into the page. I'd also change the ids to classes, so we can more easily reuse them without quirky additional numbers.
<?php
$i=5;
while($i > 0):
?>
<table width="500px" border="1">
<tr>
<td><button class="button" data-clicked="0">Show comments</button></td>
</tr>
<tr>
<td class="comments" style="display:none;height:300px;width:100%;"></td>
</tr>
</table>
<?php
$i--;
endwhile;
?>
I don't know what the element with an ID of show is, but we'll just assume it was the button.
$(".button").click(function (){
var $this = $(this);
if(!$this.data('clicked')){
$this.text("Hide Comments");
$this.closest('table').find('.comments').css('display', 'inline');
$this.data('clicked', 1);
}else{
$this.text("Show Comments");
$this.closest('table').find('.comments').css('display', 'none');
$this.data('clicked', 0);
}
});
Don't print that javascript in a while loop in php, just include it in the head of the page, or in a separate file.
Edit
As indicated in a comment below,in jQuery 1.9 the toggle no longer works as you're intending to use it, as a work around, you can add a data attribute to the button, and check it each time we click.
<button class="button" data-clicked="0">
As you can see we've added the new data-clicked attribute.
In our JavaScript above, you can see that we've completely changed how it works. We perform our own if/else to check the data-clicked state.
It is generally good practice to separate code, markup and style declarations. As a matter of style, I prefer numbered IDs. I find they help with debugging. ymmv
I also like to animate changes so people can more easily follow a change.
<!doctype html>
<html>
<head>
<title>Button Testing 1 2 3</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.comment {
display: none;
height: 0px;
width: 500px;
}
td {
width: 500px;
border: 1px solid #555;
border-collapse: collapse;
}
</style>
</head>
<body>
<?
$j = 0;
while ($j < 5 ) {
?>
<table>
<tr>
<td>
<button id="button_<?= $j ?>" class="button">Show comments</button>
</td>
</tr>
<tr>
<td class="comment"><span id="comment_<?= $j ?>">J = <?= $j ?></span></td>
</tr>
</table>
<?
$j++;
} ?>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var id = $(this).attr('id');
var j = id.substr(id.indexOf('_') +1);
if ($(this).hasClass('revealed')) {
$(this).removeClass('revealed').text('Show Comments');
$('#comment_'+j).removeClass('revealed').parent().animate({'height' : 0}, function(){$(this).css({'display': 'none'})});
} else {
$(this).addClass('revealed').text('Hide Comments');
$('#comment_'+j).addClass('revealed').parent().css({'display': 'inline'}).animate({'height' : '300px'});
}
});
});
</script>
</body>
</html>