I would like to output mysqli query rows, like 4 divs/spans inline and then it goes to next line, outputs next 4 divs/spans and so on. How can I do this ? what should I echo, and/or what kind of operators should I use ?
Actually it isn't a programming issue, but design. You'll need a container with a determined width, and then you can create divs which float aside with the width (%) you need.
Like this:
<div class="container">
{for}
<div class="col-4">echo field</div>
{next}
</div>
And, in your CSS, something like:
.container{width: 1070px}
.col-4{float: left; width: 25%}
You can use a table. Here's my pseudocode
<table>
foreach row in result
echo "
<tr>
<td>result[column1]</td>
<td>result[column2]</td>
... etc
</tr>
"
</table>
each tr will make an inline row and the td's will fill it with data from the query.
Related
my smarty code is like this i want to add new tr after adding two td $k is counter variable with this code i can not add new tr after every two td
{section name="sec" loop=$dataArray}
<tr>
{if ($k%2) == 0}
<td>{$dataArray[sec].itemNm}</td>
<td>{$dataArray[sec].rate}</td>
<td>{$dataArray[sec].unitId}</td>
<td>{$dataArray[sec].packing}</td>
</tr>
{/if}
{/section}
My Php Select Query is like
$selectdata = "SELECT *,itemNm FROM price
JOIN item ON item.itemId = price.itemId
WHERE price.companyId = ".$companyId;
$selectdataRes = mysql_query($selectdata);
while($dataRow = mysql_fetch_array($selectdataRes))
{
$dataArray[$k]['priceId'] = $dataRow['priceId'];
$dataArray[$k]['itemNm'] = $dataRow['itemNm'];
$dataArray[$k]['rate'] = $dataRow['rate'];
$dataArray[$k]['unitId'] = $dataRow['unitId'];
$dataArray[$k]['packing'] = $dataRow['packing'];
$k++;
}
You increment $k every loop of mysql_fetch_array, which means $k is the number of the row (aka TR in your HTML). If your SQL query returns 4 lines, each containing a priceId, itemNm, rate, unitId and packing.
Normally in your HTML, to represent it in a common table, you would have 4 lines TR (one TR for each row) with a column TD for each data you want to display (one TD for each data).
{section name="sec" loop=$dataArray}
<tr>
<td>{$dataArray[sec].itemNm}</td>
<td>{$dataArray[sec].rate}</td>
<td>{$dataArray[sec].unitId}</td>
<td>{$dataArray[sec].packing}</td>
</tr>
{/section}
If you perform a $k%2 == 0, you reach it every two rows (every two TR), not every two TD. If you want to close TR and open new TR every two TD and not every two TR, you have to handle your TDs in a loop and start another incrementing variable like this (example neither with smarty nor in any language in particular, just an idea of algorithm) :
for($k=0;$k<$numLines;$k++)
{
<tr>
for($l=0;$l<$numColumns;$l++)
{
if($l > 0 && $l%2 == 0)
{
</tr><tr>
}
<td>$myData[$l]</td>
}
</tr>
}
Hoping it helps :)
Your question is very hard to understand...
Do you want to split every data row in two table rows?
Since you have a static template, you can add table rows inside your loop, whereever you want. I see no need to use multiple loops.
{section name="sec" loop=$dataArray}
<tr>
<td>{$dataArray[sec].itemNm}</td>
<td>{$dataArray[sec].rate}</td>
</tr>
<tr>
<td>{$dataArray[sec].unitId}</td>
<td>{$dataArray[sec].packing}</td>
</tr>
{/section}
if this does not fit your needs, maybe could you provide an example output as you need it?
<?php
$con = mysqli_connect("localhost","root","","shady");
$query = "SELECT * fROM hall1 ";
$result = mysqli_query($con,$query) or die(mysqli_error());
echo "<form action='food.php' method='post'>";
echo "<table >";
$size = 0;
while($row = mysqli_fetch_array($result))
{
$imagewidth=200;
if($size > 900)
{
echo"<tr>";
}
echo'<td width='.$td3=100 .'px > </td>' ;
echo'<td width='.$td1=200 .'px> <label><input type="radio" name="radii" value='.$row[1].' checked> <img src="'.$row['image'].'" width="200" height="200" style="margin-top:10px;"> </label></td>' ;
echo"<td width=".$td2=200 ."px> Name  : " .$row[1] ."<br> Size     : ".$row[2] ."Person <br> Price    : ".$row[3] ." SDG <br> See More </td>";
$size+= $imagewidth+$td1+$td2+$td3;
if($size > 900)
{
echo"<tr>";
}
}
echo"</table>";
echo "<BR><BR><BR><CENTER><input type='submit' name='radiii' value='next' width='200PX' height='200PX' ></a> </CENTER></b>";
echo "</form>";
}
?>
There are many problems with your code:
It's unclear what the variable size does. I'm willing to bet it's unnecessary
You are using deprecated code. The width attribute on HTML elements is no longer supported, and if you insist on using it, you should only enter the width in pixels without the px like so: <td width="200">. The <center> tag is also deprecated.
Your <label> tag is pretty much useless. What are you trying to achieve with it?
It's a bad practice to set the widths on all rows, just set the widths on the first row's cells. Even better, do not use any style directly on the HTML tags and using CSS rules instead.
Lastly, i believe it would be much more readable code to NOT echo HTML and instead use the following approach to "plug in" your variables from PHP into HTML code :
<? $a = "Some variable"; $b = 123; $c = "http://example.com/img/1.png"; ?>
<p><strong>My variable a: <?=$a?></p>
<p><strong>My variable b: <?=$b?></p>
<p><strong>My img: <img src="<?=$c?>"></p>
In short, wrap your PHP logic in <? and ?> (be sure to have short_open_tag = On in your PHP settings or you'll need to use the alternative opening tag <?php like you did.
The write plain old HTML without all the echo. Whenever you want to echo something you simply write a new PHP opening tag like so :
<? echo $a ?>
OR, the shorthand version
<?=$a?>
Now your real problem is about designing the page. And i think you are starting in the wrong order. I would suggest you
1- Build a design that works using some IDE like Adobe Dreamweaver or a freeware alternative. With that tool, make the design for 1 item (1 iteration of your while loop).
The next step is to see how you're gonna repeat it. You seem to want a Horizontal list that wraps around lines at a certain width. One way you would do that is that you would wrap all the list items with a div element for which you will set a fixed width. And inside you will have the code you have for each item repeated for all items. If your outer div has a width of 900px and each element consumes 300px in width and you have 9 items, you would have a 3x3 grid.
Here is a summary code of what i explained. In your PHP file you would have:
<div class="grid">
<? while($row = .... ){ ?>
<div class="item">
<!-- The code for the image, label and whatever information you want to have for each item -->
</div>
<? } ?>
</div>
And a CSS file which you would link in your PHP file, containing:
.grid {
width: 900px;
}
.item {
width: 300px;
}
If the information your are displaying come from user input you should sanitize it and have some sort of logic that breaks long text, either with CSS or PHP.
In short, you seem to be doing all the math in PHP so that you jump into a new line once the total width exceeds your desired grid width. This is a design issue and not a logic / programming issue. Therefore you should tackle this with CSS and not PHP.
I strongly suggest you either follow a video tutorial (there are plenty online) or read some documentations on HTML, CSS, JavaScript, PHP and MySQL in that order.
Here is a link to get you started: Mozilla Developer Network
Hello I am trying to change CSS content on some DIVs depending of their class name.
To explain better, I have a while loop in PHP reading from the database to output DIVs and I have a field named "section" with data such as A,B,C,D,E,F,G.
For the DIVs located in section "A" and "B" I want the class name to be desk_box_hor (for horizontal) ELSE I want it to desk_box_ver(vertical).
Below is what I tried doing only two sections (A,B) that need to be vertical. The others need to be horizontal. If theres a more efficient way of doing this please tell me. I have about 200 of these DIVs being output on screen.
If you have a better title please recommend one, I didn't know what to put lol.
Thanks in advance!
My fiddle of what I want both DIVs to look like
PHP:
while($row = mysqli_fetch_assoc($desk_coord_result)){
//naming X,Y values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
$sec_name = $row['section_name'];
//draw a DIV box at its X,Y coordinate
//if section A and B do vertical
if($sec_name == 'B' || $sec_name == 'A'){
echo '<div class="desk_box_ver" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
}
//else do it horizontal
else{
echo '<div class="desk_box_hor" data="'.$id.'" style="position:absolute;left:'.$x_pos.'px;top:'.$y_pos.'px;">id:'.$id.'</div>';
}
} //end while loop for desk_coord_result
CSS:
/* desk boxes*/
.desk_box_ver{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box_hor{
width: 10px;
height: 23px;
border: 4px solid black;
padding:10px;
}
Also, lets say I want to use these two classes in the same Jquery function, is this the proper way of doing it?
$(".desk_box").add(".desk_box_ver").click(function() {
or
$(".desk_box, .desk_box_ver").click(function() {
In answer to your question "If theres a more efficient way of doing this please tell me." (I'll leave your other questions to someone else) yes, there are more efficient ways to write this PHP code, which then makes debugging and maintenance easier:-
a) Instead of two very long echo strings which are almost exactly the same, introduce a new PHP variable, say, $class. Then write:
$class = 'desk_box_hor';
if($sec_name == 'A' || $sec_name == 'B'){
$class = 'desk_box_ver';
}
echo '<div class="' . $class . '" data="' . $id . '" style="position:absolute;left:' . $x_pos . 'px;top:' . $y_pos.'px;">id:' . $id . '</div>';
Now you only have one long echo string to write, and to debug.
Also my preference is (though this is opinion only) to put a space either side of all those string concatenation dot operators - it makes it easier to decipher whats going on.
b) The next improvement you can make is to swap all the single and double quotes. Then you can write a single string with no concatenation operators at all, as you can put a PHP variable inside double quotes. Again, it makes the string of html clearer and easier to read, and debug. (Browsers can handle single or double quotes in the HTML tags). You end up with:
echo "<div class='$class' data='$id' style='position:absolute;left: $x_pos" . "px;top: $y_pos" . "px;'>id:$id</div>";
c) Next we can make the HTML code being created more readable; at the moment your script is generating a huge block of HTML markup (200 divs?) with no line breaks. Horrendous to debug. Just add \n to the end of your echo string like so:
echo ".....id:$id</div>\n";
and that will split the generated HTML markup into separate lines (but the onscreen text will be unaffected). Much easier then to see if one of the items went wrong (for instance, if the database returns an empty value for one of the records, it will stand out in the HTML like a sore thumb). Note that you can add \n inside a string surrounded by double quotes; if you stay with the original single quoted string you would have to add with a dot operator:
.....id:$id</div>' . "\n";
d) Lastly, you could cut out all those 200 position:absolute strings from the generated HTML markup by putting it into your CSS stylesheet, just retaining the CSS values that vary. Ie:
.desk_box_hor, .desk_box_ver { position: absolute; }
As regards why you are only getting vertical divs, never horizontal, I'll just try an educated guess. Are you really getting back from the database what you think you are?
For instance, you say in your comments the field name is "section", but the PHP is looking for a "section_name" field. Or is the data itself wrong? Have you got PHP error checking on, eg error(reporting(E_ALL)? If not, it would not return an error message, but still blindly go on reading through all rows in the db.
In that case it will always take the else part of your if...else. Supposedly this is the horizontal div path, but because the CSS has the width and height values the wrong way round (see above) it will actually produce vertical boxes all the time.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Hello. I have an assignment 9.2 to do and have no idea where to start.
I have made the index.php which allows the user to input the width and height of the table.
Here is the code for that:
<html>
<head>
<title>Assignment 9.2</title>
</head>
<body bgcolor="black" text="white">
<form method="post" action="table.php"
<strong>Please select an integer for the width:</strong>
<input type="text" name="width" size="10">
<br>
<strong>Please select an integer for the height:
<input type="text" name="width" size="10">
<input type="submit" value="Submit">
</form>
</body>
</html>
I do not know where to start on making the table. I do not expect to have this
done for me.. but to simply explain where to start and the php codes I need to use.
Again.. this is for 9.2 which is shown in the picture attached.
Okay, so this is a fairly simple thing to do if you understand how html tables are laid out in code...
HTML table format
The first step is to understand how tables are laid out in html...
3x2 table
For a 3 columned / 2 rowed table the code would look something like this...
Pseudo
opening table tag
opening row tag
cell tag
cell tag
cell tag
closing row tag
opening row tag
cell tag
cell tag
cell tag
closing row tag
closing table tag
HTML
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
I don't know how much you know about html but hopefully that should make sense if not there are a wide variety of resources available that can explain the tags used etc...
PHP Code
At this point we're going to skip the input of width and height (as you already have the code for that) and assume that you've captured them as follows:
$in_width = $_POST['width'];
$in_height = $_POST['height'];
So now we know what the width and height of the table is going to be we can look at how to put them together:
If you look back at the example table code above you'll see that tables are rendered one row at a time in the format:
First row first column
First row second column
First row third column
Second row first column
...and so on...
This might be more clear by looking at the numbers in your screen grab above.
Given that we know how a html table is structured we can determine that we can use two loops* (the second one embedded in the first) to produce the desired output.
(The rows will be the outer loop and the columns will be in the inner loop - see example html code above)
Pseudo code
start table
for each row {
start row
for each column {
print cell
}
end row
}
end table
*You can use any loop you're comfortable with (i.e. for or loop) they do the same thing
If you want to do this yourself, I suggest that you stop reading here. Spoiler follows...
Spoiler
Two while loops
$in_height = $_POST['height']; // Get table height
$in_width = $_POST['width']; // Get table width
$counter = 1; // Start the counter at 1
$temp_width = 0; // Set temporary variable for width(second loop)
echo "<table>"; // Print opening tag for table
while($in_height > 0){
echo "<tr>"; // Print opening tag for row
$temp_width = $in_width; // Set temp_width to width of table
while($temp_width > 0){
echo "<td>$counter</td>"; // Print cell with counter value
++$counter; // Increment counter
--$temp_width; // Decrement temp_width
}
echo "</tr>"; // Print closing tag for row
--$in_height; // Decrement height
}
echo "</table>"; // Print closing tag for table
Two for loops
Just for demonstration purposes...
$in_height = $_POST['height'];
$in_width = $_POST['width'];
$counter = 1;
$temp_width = 0;
$temp_height = 0;
echo "<table>";
for($temp_height = 0; $temp_height < $in_height; $temp_height++) {
echo "<tr>";
for($temp_width = 0; $temp_width < $in_width; $temp_width++){
echo "<td>$counter</td>";
++$counter;
}
echo "</tr>";
}
echo "</table>";
You could also mix and match loops...
I need to print an html table with row heights sets dynamically based on some values from the database using PHP. seems that html 5 doesn't support inline height and with tags and using css instead.
My requirement is to generate an html file and then convert it into pdf using DOM pdf.
Please guide me how to set these parameters dynamically inline or using css or whether a library already available for the same purpose.
I Googled a lot, but unable find any results matching my requirement.
Also am attaching final output format
(In answer column i printed some values which is the height required for each row)
Thanks in advance
You can use inline styles:
<tr style="height: 300px;"></tr>
I am not sure if you can effectively set the height of a <tr> tag, so you might have to set the height of each <td> in the row individually. Give it a try.
Furthermore, I am not sure how you have your array of rows and columns structured, but this might shed some light on how to do it.
<?php
$array=array(array(50,'r1c1','r1c2'),array(50,'r2c1','r2c2'));
echo '<table>';
foreach($array as $row)
{
echo '<tr style="height: '.$row[0].'px;">';
echo '</tr>';
for($i=1;$i<count($row);++$1)
{
echo '<td>'.$row[$i].'</td>';
}
}
echo '</table>';
?>
If you still need help, post the exact array you wish to turn into a <table> and I will do my best to assist.
If I understand this right, your table rows can be different sizes from each other, but for each row there is a rule in database, that sets row's height, no matter what height the content of the row, right? Then you can use something like this:
<html>
<head>
<style>
<?php foreach($yourRows as $key => $row) { ?>
#row<?=$key;?>{
height: <?=$row['height']; ?>px;
}
<?php } ?>
</style>
</head>
<body>
<table>
<?php foreach($yourRows as $key => $row) { ?>
<tr id="row<?=$key; ?>">
...
</tr>
<?php } ?>
</table>
</body>
In the style tag you can replace "#row<?=$key;?>" with "#row<?=$key;?> td"
Updated
Anyway, if you want to use the inline styling, you can make it happen like that:
<html>
<body>
<table>
<?php foreach($yourRows as $row) { ?>
<tr style="height:<?=$row['height']; ?>px">
Or you can apply height to td instead of the tr...
</tr>
<?php } ?>
</table>
</body>
If you think that jQuery might work here is a suggestion. I'm not sure it works with DOMPDF but as we're dynamically creating CSS it should be fine once the DOM has loaded.
If you know exactly the heights of each row - then select them using jQuery using eq.
$(document).ready(function() {
$('table tr').eq(1).css({'height':'250'});
$('table tr').eq(3).css({'height':'450'});
});
Here is the fiddle.
That way you don't have to modify the output but you have to make the assumption the content isn't going to be higher than your fixed height.
If you need this to be more dynamic then you'll need to either associate identifiers to your rows, like a class or something like that. Or alternatively, if you have a pattern in your content is to create a regular expression that scans your content and identifies it that way - then you can apply CSS rules to these rows once matched using jQuery.
EDIT
OK so I may have slightly misunderstood if you have the height value stored in the database. It also looks as though you've determined already that you're unable to use inline styles.
Here is my next suggestion.
You're building the table from a loop so it probably looks something like this.
foreach($rows as $row) {
echo '<tr data-height="'.$row['height'].'"><td>...</td></tr>;
}
if you add data-height="'.$row['height'].'" then you have a value that we can get using jQuery's data like so.
$(document).ready(function() {
$('table tr').each(function() {
var height = $(this).data('height');
$(this).css({ 'height': height });
});
});
Here is an example fiddle with static data-height values. Let me know how you get on.