I'm dynamically filling a table of content fetch from the database.
This table is inside a <div>
So I'm setting a variable $col to limit how much columns I want each row (by default I saw 5 fit perfectly) in the div. Otherwise the table content just goes outside the div.
The problem is I had to set that manually. I looked around a lot how to make any content inside div and once it colides with the border but couldn't find anything. If I could have the same result without using tables which are the problem I think . I'll be glad to update that.
$col = 1; //initialisation
foreach ($result as $product){ //a loop to fetch data into product object
if($product->visible == 1){
if($Col < 6){
echo "<td>";
echo "<a href ='read.php?id=".$product->id_product."&p=0'><div class='productdiv'>";
echo "<img src ='galleries/".$product->id_product."/c".$product->id_product.".jpg' alt = 'cover' width='220' height='300'><h4 class='productclass'>".$product->name_product."</h4>";
echo "</div></a>";
echo "</td>";
$col= $col+ 1; //here I'm incrementing
}
else{ //I close the line <tr> then another line begin
echo "</tr><tr><td>";
echo "<a href ='read.php?id=".$product->id_hentai."&p=0'><div class='hendiv'>";
echo "<img src ='galleries/".$product->id_product."/c".$product->id_product.".jpg' alt = 'cover' width='220' height='300'><h4 class='productclass'>".$product->name_product."</h4>";
echo "</div></a>";
echo "</td>";
$col= 1;
}//end the code
result
Please use
display: inline-block
It will accommodate the content. And where you have open the <tr> in "if" condition.
Not fully sure I understood your question but this sounds like a job for JS
1 You should read all possible columns from db and create table from them but set visibility to hidden.
2 Then add JS and define column priorities.
3 Get maximum allowed width for table.
4 Using JS read width of all you cells
5 By priority sum your cell width until it's > max width
6 hide cells with lesser priority that can't fit
Related
I have a <div> inside a while loop and inside this while loop I'm dynamically creating tables with different number of rows, therefore the div tag within the first while loop cannot have a pre-set size since some tables generated can be longer than expected.
Example of how my code is like:
while ()
{
echo '<div>';
echo '<table>';
while ()
{
echo '<tr></tr>'; // this varies since number of row retrieve may be different which is causing the issue
}
echo '</table>';
echo '<div>';
}
I want to write something like this :
<?php
$comment = mysql_query("SELECT * FROM `communication` WHERE `ID`='$index' order by `Date_add` desc");
echo "<div class=\"row\">";
while ($com = mysql_fetch_assoc($comment)) {
$side = mysql_query("SELECT Type FROM `client` WHERE `ID`='$comtype'");
if ($side[0]==2) {
echo "<div class=\"left\">"; // and i want to execute this line only when the next value of $side is equal to 1 or 9
echo "<div class=\"inside1\">"
...
echo "</div>";
echo "</div>"; // same as above, close div only, when the next value of $side is equal to 1 or 9
} else if ($side[0]==1 || $side[0]==9) {
echo "<div class=\"right\">"; // Same here i want to execute this line only when the next value of $side is equal to 2
echo "<div class=\"inside2\">";
...
echo "</div>";
echo "</div>"; // same as above, close div only, when the next value of $side is equal to 2
}
}
echo "</div>";
I need to execute whole code, but i have div inside div, and i want and execute when value of $side[0] is different. For example:
Loop step 1:
$side[0]=2
so i want to execute: <div class=left> and everything in this div.
Loop step 2:
$side[0]=2 again
so i want to execute all in <div class=left> but i dont want to create another <div class=left>
Lopp step 3:
$side[0]=1
so previously $side[0] was equal 2, so now i want to create <div class=left> and everything in this div
Lopp step 4:
$side[0]=1 again
so i want to execute all in <div class=right> but i dont want to create another <div class=right>
etc...
Anyone know how to achive effect like this ? Thanks for help in advice.
Understanding your problem, you have two main din inside your while loop and inside those div you want to display result according to a particular column value. The way I can suggest you make to separate array based on the value from query. Then iterate through individual array and display it on the let/right div accordingly.
I am trying to create a hyperlink from two pieces of text split over two cells in a table row.
I am generating my table using PHP to echo out the results from my database to a table.
When it echo's it generates a hyperlink with GET variables at the end which allow the user to visit a page relevant to that information.
The problem is that I can't seem to generate a hyperlink that will go across those table cells, I have looked around the web and there is nothing that says I cannot do this.
As you can see from the screenshot below I am generating a hyperlink inside one table cell but I want the other table cell to have the same hyperlink.
Code
while ($row = $db->fetch_assoc($newest))
{
echo "<tr>";
echo "<td>";
echo "<a href='manager.php?method=view&id=".$row['id']."'>".$row['first_name']." ". $row['second_name']. "</td><td>".$row['company_name']."</a>";
echo "</td>";
echo "</tr>";
}
I have a feeling that I will just have to generate two separate hyperlinks for the table cells.
However I am hoping someone here can prove me wrong and save me a few lines of code.
Thanks :)
Using native hyperlinks, you will have to create separate wrappers for each cell.
However, if you want to use JS for linking and redirecting, you could do something like:
.....
<tr class="clickable" data-href="http://google.com">
<td>cell-1</td>
<td>cell-2</td>
<td>cell-3</td>
</tr>
....
and then:
$(function(){
$('tr.clickable').click(function(){
window.location.href = $(this).attr('data-href');
});
});
Simply work around it with JS:
echo "<tr onclick=\"location.href='manager.php?method=view&id=".$info.";'\">";
If you do not want to break the table structure (ie. putting the name and the company into one (multi-column) cell), there is IMHO no way other than generating two hyperlinks.
What you might want to do is to use some CSS for a hover effect and some JavaScript to register a user clicked on a cell (which you can, given the structure above, associate with the tr element).
You can not do it like this. Try instead:
while ($row = $db->fetch_assoc($newest))
{
$url = "manager.php?method=view&id=".$row['id'];
echo "<tr>";
echo "<td>" . $row['first_name']." ". $row['second_name']. "</td>";
echo "<td>" . $row['company_name'] . "</td>";
echo "</tr>";
}
while ($row = $db->fetch_assoc($newest))
{
echo "<tr>";
echo "<td>";
echo "<a href='manager.php?method=view&id=".$row['id']."'>".$row['first_name']." ". $row['second_name']."</a></td><a href='manager.php?method=view&id=".$row['id']."'>".$row['company_name']."</a><td></td>";
echo "</td>";
echo "</tr>";
}
Is there a way I can use Jquery to insert '' tags after every three dynamically generated table cells so that I end up with a dynamic three column table?
Please excuse my lack of knowledge, I'm literally trying to write my first jquery script ever, so I know absolutely nothing. I know php and I have a table that has a loop within it that is dynamically creating <td></td> with the information inside each tag. In other words it is dynamically creating the table cells within a static <tr></tr> tag. The problem is that it keeps outputing tables without breaking them up into rows which leaves me with a bunch of columns. I've read other articles on this but none seem to have the exact same problem as I do, and I am still struggling to understand how to write custom Jquery code.
The php code is very long and is full of numerous if statements and other functions so I'm not going to post it here but just to make it a little simpler, I made miniature mockup of what I'm trying to do.
<table id="mytable" width="266" border="1" cellspacing="10" cellpadding="10">
<tr>
<?php
$x=0;
while (have_products($x)) {
echo '<td>' . somelongassfunction() . '</td>';
$x++;
if (fmod($x,3) == 0) {
echo '</tr><tr>';
continue;
}
if ($x==20){
echo '</tr>';
}
}
function somelongassfunction(){
return 'Hello';
}
function have_products($a){
return $a<=20;
}
?>
</table>
This code loops and dynamically adds table cells up to the limit I give it which would represent my database items. Every three rows, it adds either a <tr></tr> or just a </tr> depending on whether the loop continues or not. This creates a 3 column table. I can't apply this code for my script because it is a very long and complex script that has a lot of if statements and functions. There is no way of doing it like this without breaking the code or having to rewrite everything from scratch all over again.
Is there anyway I can append the tr tags dynamically with Jquery and how would I go about to applying this to?
The jQuery approach would be to loop through all of the tabs, and add them to newly created tags, which themselves are added to the html of the table. Roughly:
var thisCount=0;
var currenttag="<tr />";
var table=$("table");
$("td").each(function ()
{
if(thiscount==2)
{
table.appendChild(currenttag);
thisCount=0;
currenttag="<tr />";
}
currenttag.appendChild(this);
}
( this is just to give an idea, not intended as a formal JQ answer. If anyone wants to edit it so it works fully, feel free ).
You can use a selector to select every third row:
$('#table_id > tr:nth-child(3n)').whatever_function()
However if you are trying to append end /tr tags, try doing it in PHP using a counter that resets itself (this code should get you started):
echo "<tr>";
$x = 0;
$y = 0;
while (have_products($x)) {
echo '<td>' . somelongassfunction() . '</td>';
$y++;
if ($y == 3) {
$y = 0;
echo "</tr><tr>";
}
$x++;
}
echo "</tr>";
So what I'm trying to do is select all the distinct months from my database and then print them in a list. That, I can accomplish. The problem lies in the fact that I need my list to be two column. The way that I achieve this with CSS is by using 2 different div's "left" and "right" which are floated next to each other. This poses a problem with PHP because it needs to echo a div close and a new div open after it echoes the sixth month. Then it needs to start again from where it left off and finish. I can't just list all of the months in the HTML, either because I don't want it to list a month if I don't have any records in the DB for that month, yet. Any ideas? I hope I was clear enough!
Thanks!
-williamg
Something like this should work (the basic idea being to just keep a count of the months an increment it as you loop through them):
<div class="left">
<?php
$x = 1;
foreach($months as $month) {
# switch to the right div on the 7th month
if ($x == 7) {
echo '</div><div class="right">';
}
echo "<div class=\"row\">{$month}</div>";
# increment x for each row
$x++;
}
</div>
<?php
$numberOfMonths = count($months);
$halfwayPoint = ceil($numberOfMonths / 2);
echo "<div class=\"left\">";
for($i=0; $i<$halfwayPoint; $i++){
echo $months[$i] . "<br />";
}
echo "</div><div class=\"right\">";
for($i=$halfwayPoint; $i<$numberOfMonths; $i++){
echo $months[$i] . "<br />";
}
echo "</div>";
?>
Rant: on
When displaying tabular data, use table instead of floating div. It will make sense when viewing the page with css disabled. If you use floated div, then you data will displayed all way down. Not all table usage is bad. People often hate table so much, so using floated div. Table only bad when used for page layout.
Rant: off
When I need to have certain content displayed with some open, close, and in-between extra character, I will make use of implode. This is the example:
$data = array('column 1', 'column 2');
$output = '<div>'.implode('</div><div>', $data).'</div>';
//result: <div>column 1</div><div>column 2</div>
You can extends this to almost anything. Array and implode is the power that php have for many years. You will never needed any if to check if it last element, then insert the closing character, or check if it first element, then insert opening character, or print the additional character between elements.
Hope this help.
Update:
My bad for misread the main problems asked. Sorry for the rant ;)
Here is my code to make a data displayed in 2 column:
//for example, I use array. This should be a result from database
$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
//should be 12 month, but this case there are only 9 of it
for ( $i = 0; $i <= 5; $i++)
{
//here I do a half loop, since there a fixed number of data and the item for first column
$output = '<div class="left">'.$data[$i].'</div>';
if ( isset($data[$i+6] )
{
$output = '<div class="right">'.$data[$i+6].'</div>';
}
echo $output."\n";
}
//the result should be
//<div class="left">1</div><div class="right">7</div>
//<div class="left">2</div><div class="right">8</div>
//<div class="left">3</div><div class="right">9</div>
//<div class="left">4</div>
//<div class="left">5</div>
//<div class="left">6</div>
Other solution is using CSS to format the output, so you just put the div top to down, then the css make the parent container only fit the 6 item vertically, and put the rest to the right of existing content. I don't know much about it, since it usually provided by fellow css designer or my client.
Example assumes you have an array of objects.
<div style="width:150px; float:left;">
<ul>
<?php
$c = count($categories);
$s = ($c / 3); // change 3 to the number of columns you want to have.
$i=1;
foreach($categories as $category)
{
echo '<li>' . $category->CategoryLabel . '</a></li>';
if($i != 0 && $i % $s == 0)
{
?>
</ul>
</div>
<div style="width:150px; float:left;">
<ul>
<?php
}
$i++;
}
?>
</ul>
</div>