I have the following code that displays an html table of words and their counts from a PHP associative array. A table can have up to 10 columns by 10 rows (it's variable):
| col1 | col2 | col3 | col4 |
|-------|------|-------|------|
| word1 | 50 | word4 | 25 |
| word2 | 44 | word5 | 21 |
| word3 | 39 | word6 | 16 |, etc.
The CSS highlights and underscores individual <td> cells on hover. However, I need the hover/highlight/underscore to work ONLY on the <td> cells with words--not on the numbers. The words will always be in odd-numbered columns--and numbers will always be in even-numbered columns.
Can you please suggest the code that will do that? I've read that I might need to do this in jQuery because of browser issues related to hover. Here's what I have so far. Thank you in advance. :)
?>
<table id="word-table">
<?echo "<th>Word Counts</th>";?>
<tbody>
<?
foreach ($rows as $cols) {
echo '<tr><td>' . implode('</td><td class="nth-child(2n-1)">', $cols) . '</td></tr>';
}
?>
</tbody>
</table>
<?
#word-table td:nth-child(2n-1) {
background: #CCFFCC;
}
#word-table td:nth-child(2n) {
display: block;
background: #CCE0FF;
margin-right: 7px;
text-align: center;
}
#word-table tbody td:hover
{
cursor: hand;
cursor: pointer;
color: blue;
text-decoration: underline;
background: #FFFFCC;
}
You don't need jQuery for this, you can just use CSS.
td:nth-child(odd):hover{
...
}
Works reliably in most browsers: http://caniuse.com/css-sel3
Demo: http://jsfiddle.net/PV6jV/
Also, I notice you're adding nth-child(2n-1) as a class - :nth-child is a pseudo class, so you don't have to actually add it.
Explicit is better
<? foreach ($rows as $cols): ?>
<tr>
<td> <?php echo $cols[0]; ?></td>
<td class="highlight"> <?php echo $cols[1]; ?></td>
<td> <?php echo $cols[0]; ?></td>
<td class="highlight"> <?php echo $cols[3]; ?></td>
</tr>
<?php endforeach; ?>
Related
I have dynamic data where it could always change. For example:
This is what I have now:
Sometimes like this:
|==============|======|====|====|
|List of people|John |June|Tom |
|Date Join |2017 |2018|2016|
|Hobby |soccer| |
|Remark | test test |
And sometime I would get like this:
|==============|======|======|=====|
|List of people|John |June |Tom |
|Date Join |2017 |2018 |2016 |
|Hobby |soccer|tennis| |
|Remark | test test |
I want to make something like this: (is there any way to do it?)
|==============|======|====|====|
|List of people|John |June|Tom |
|Date Join |2017 |2018|2016|
|Hobby | soccer |
|Remark | test test |
or like this:
|==============|======|====|====|
|List of people|John |June|Tom |
|Date Join |2017 |2018|2016|
|Hobby | soccer|Tennis |
|Remark | test test |
Here is the code I used: (this is how I do it for list of people, date and hobby)
#foreach($object7 as $val)
<tr>
<th style="border: 1px black solid">List of people</th>
<?php
$test = $val->people;
$testa = rtrim($test, ', ');
$array = explode(', ', $testa);
$count4 = count($array);
?>
#foreach($array as $item)
#if(($val->people == NULL) || ( $count4 <= 1))
<td style="border: 1px black solid" colspan="8">
#else
<td style="border: 1px black solid" colspan="1">
#endif
{{$item}}
</td>
#endforeach
</tr>
#endforeach
EDIT:
The remark row only has 1 value while the rest can have more than 1 value or more. What I want is based on all this, how can I make all of them the same length?
Try the "colgroup" tag lets try to set their width to make it fix:
#foreach($object7 as $val)
<tr>
<td style="border: 1px black solid" with="40%">List of people</td>
<?php
$test = $val->people;
$testa = rtrim($test, ', ');
$array = explode(', ', $testa);
$count4 = count($array);
?>
#foreach($array as $item)
#if(($val->people == NULL) || ( $count4 <= 1))
<td style="border: 1px black solid" with="60%">
#else if($count4 == 2)
<td style="border: 1px black solid" with="40%">
#else
<td style="border: 1px black solid" with="20%">
#endif
{{$item}}
</td>
#endforeach
</tr>
I am tasked to get the surname of the person and put it on a table as all capital letters. How do I do it with a loop?
I've already gotten the full name for the first row. I don't know how to get the last name for the 2nd row though.
<html>
<title> Task 4 </title>
<style>
table, td, th { border: 1px black solid; border-collapse: collapse; }
p { padding: 0px; margin:0px; font-family: monospace;}
</style>
<body>
<h1> Task 4: PHP Program #2 </h1>
<?php /* Write your code here */
print "<table> \n";
print "<th> Full Name </th> <th> Surname only </th> \n";
$names = file("names.txt");
for ($i = 0;$i<sizeof($names);$i++){
print "<tr><td>$names[$i]</td><td></td></tr>\n";
}
print "</table> \n";
?>
</body>
</html>
The list of names in the text file is this
Abdel Zhang
Terry Deaner
Didi Xiong
Kate Sanko
Seonjoo Kim
Rang Nyguen
Zheng Lu
Robert Smith
Donald Trump
Crack Stuntman
Meredith Jones
Abdullah Afifi
Hakki Kamier
Given, the name is always divided by an simple space, you could just use explode.
$parts = explode(' ', $line[$i]);
$firstname = $parts[0];
$lastname = $parts[1];
I use the CodeIgniter PHP framework.
My view code:
<?hp
$nomor_III=1;
foreach ($listPertanyaanBlokIII as $data){
echo '<tr>';
echo '<td>'.$nomor_III.'</td>';
echo '<td style="text-align:left;padding-left:5px;">'.$data['jenis_barang'].'</td>';
echo '<td>'.$data['id_kualitas_barang'].'</td>';
echo '<td style="text-align:left;padding-left:5px;">'.$data['kualitas_barang'].'</td>';
echo '<td>'.$data['satuan'].'</td>';
echo '<td>'.form_input('res1_'.$data['id_kualitas_barang'].'').'</td>';
echo '<td>'.form_input('res2_'.$data['id_kualitas_barang'].'').'</td>';
echo '<td>'.form_input('res3_'.$data['id_kualitas_barang'].'').'</td>';
echo '<td style="width:200px;"><textarea name="ket_'.$data['id_kualitas_barang'].'" rows="2" cols="30"></textarea></td>';
echo '</tr>';
$nomor_III=$nomor_III+1;
}
?>
And, the view in the browser:
Num | Product
----------------
1 | Plate
2 | Plate
3 | Glass
4 | Glass
How can I make data with the same description have the same background color? For example "Glass" becomes grey, "Plate" will be white, etc.
Just add the color description as a class. While I don't understand your array keys, it would look like this:
echo '<td class="'.$data['description'].'">'.$data['description'].'</td>';
The have a corresponding class for each descrption:
.paku {
background-color: #000000;
}
EDIT: If you want a zebra table, you can use CSS3:
tr:nth-child(even) {
background-color: #DCDCDC;
}
tr:nth-child(odd) {
background-color: #FFFFFF;
}
You can check sub string matches and apply background colors according to it
What you're looking for is the tbody element for grouping purposes. You'll need to modify your loop in a way that would let you place all of the products of the same type in the same tbody. Once you've done that, you can do your zebra striping on the tbody.
tbody:nth-child(odd) {
background: #CCC;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>Plate</td>
</tr>
<tr>
<td>2</td>
<td>Plate</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
<td>Glass</td>
</tr>
<tr>
<td>4</td>
<td>Glass</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/V8xss/
I've shown how you might go about modifying the loop as an answer to another question: Displaying table data column-wise in a while loop (though you'll need to change the inserted tags from tr to tbody)
You could try restructuring your initial dataset $listPertanyaanBlokIII, such that it is grouped by product:
Array
(
[plate] => Array
(
[0] => plate 123
[1] => plate 456
)
[glass] => Array
(
[0] => glass 123
[1] => glass 456
)
)
Then (simplified code):
$css_class = 'even';
foreach($listPertanyaanBlokIII as $group => $array){
$css_class = $css_class == 'even' ? 'odd' : 'even';
echo $group.'<br>';
foreach($array as $val){
echo ' ---- '.$val.' class='.$css_class.'<br>';
}
}
Output, again this is simply to prove the concept:
plate
---- plate 123 class=odd
---- plate 456 class=odd
glass
---- glass 123 class=even
---- glass 456 class=even
Sorry about the length here. I'm using oscommerce and have a page with all our product specials laid out in a 3 column table. I need to align the price of each product so that all the prices align across the screen with one another.
Visually, this is what I would like:
|-----------------------|
| Image | Image | Image |
| Title | Long | Very, |
| | Title | very, |
| | | long |
| | | title |
|$19.99 |$29.99 |$139.00|
|-----------------------|
Currently, this is what the existing code generates:
|-----------------------|
| Image | Image | Image |
| Title | Long | Very, |
| $19.99| Title | very, |
| |$29.99 | long |
| | | title |
| | |$139.00|
|-----------------------|
This is the code as it stands:
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<?php
$column = 0;
$specials_query = tep_db_query($specials_split->sql_query);
while ($specials = tep_db_fetch_array($specials_query)) {
$column ++;
echo '<td align="center" width="33%" class="productListing-data" valign="top">
<div class="prodimagebox"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO,
'products_id=' . $specials['products_id']) . '">' . tep_image(DIR_WS_IMAGES .
$specials['products_image'], $specials['products_name'], SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT) . '</a></div><br><a href="' .
tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $specials['products_id'])
. '">' . $specials['products_name'] . '</a><br>'
. $currencies->display_price($specials['specials_new_products_price'],
tep_get_tax_rate($specials['products_tax_class_id'])) . '</td>' . "\n";
if ((($column / 3) == floor($column / 3))) {
?>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<tr>
<?php
}
}
?>
</tr>
</table>
I was trying to write some code that writes out the image and title, then takes us back 3 steps in the array. Next a new row, then three new columns containing the prices for the products above, a separator, and then continue on from there.
This way the prices would all be vertically aligned with one another, no matter the size of the title. I was heading down the pass of multiple nested loops and still getting no closer to my final result.
Help would be greatly appreciated.
you should put the description and the price into two different divs:
<style>
td.productListing-data div.item_wrapper {
position: relative;
}
td.productListing-data div.item_wrapper div.item_description {
margin-bottom: 15px;
}
td.productListing-data div.item_wrapper div.item_price {
position: absolute;
bottom: 0;
height: 15px;
}
</style>
<td align="center" width="33%" class="productListing-data" valign="top">
<div class="item_wrapper">
<div class="item_description">
<!-- the description -->
</div>
<div class="item_price">
<!-- the price -->
</div>
</div>
</td>
I have just created an example, all you need to do is to work it into your table creation.
I am using php/mysql, and have a database table with image url. I would like to know how can I put them on a php page with a 3 x 3 table, such that each td will show a different image based on the image url from the database?
I want to create something like this, where the alphabets are the images:
|a|b|c|
|d|e|f|
|g|h|i|
So far, I am only able to use do while to create something like this:
|a| | |
|b| | |
|c| | |
Thanks.
This would be the general approach:
$query = "SELECT url FROM images LIMIT 9";
$resource = mysql_query($query);
# Get the number of images
$count = mysql_num_rows($resource);
$i = 0;
$per_row = 3;
# Start outputting the table
echo '<table><tr>';
while($row = mysql_fetch_assoc($resource)) {
# The image cell
echo '<td><img src="'.$row['url'].'" /></td>';
# If three cells have been printed, and we're not at the last image
if(++$i % $per_row == 0 && $i > 0 && $i < $count) {
# Close the row
echo '</tr><tr>';
}
}
# If the last row isn't 'full', fill it with empty cells
for($x = 0; $x < $per_row - $i % $per_row; $x++) {
echo '<td></td>';
}
echo '</tr></table>';
That is, just loop the results normally but on every third item, echo a row change (</tr><tr>). Just make sure that you don't print extra row changes at the beginning or the end, hence the additional conditions.
The resulting table should be something like this (line breaks added):
<table>
<tr>
<td><img src="image.jpg1" /></td>
<td><img src="image.jpg2" /></td>
<td><img src="image.jpg3" /></td>
</tr>
<tr>
<td><img src="image.jpg4" /></td>
<td><img src="image.jpg5" /></td>
<td><img src="image.jpg6" /></td>
</tr>
<tr>
<td><img src="image.jpg7" /></td>
<td><img src="image.jpg8" /></td>
<td><img src="image.jpg9" /></td>
</tr>
</table>
Use a counter to keep track of how many images you've displayed already, and only emit </tr><tr> every 3 images. Hint: $count % 3
You don't really need to do this with tables (think about it, you're just trying to display something in a grid, you're not really trying to create a table of things).
With a little CSS you can do it like this (you can use the appropriate HTML5 elements if you use html5-shiv for MSIE):
<div class="figure">
<img src="mypic.jpg" alt="">
<div class="description">Description goes here</div>
</div>
and in CSS:
.figure {
float: left;
margin-right: 10px; /* for space between the columns */
padding: 5px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.figure .description {
margin-top: 1em;
font-variant: italic;
}
If they are all the same size and you want to force them into a NxN grid, you can wrap them in a div (class="grid") do something like this (3x3 grid, 100px inner figure width (i.e. 90px image width)):
.grid {
padding-left: 10px; /* to mirror the right margin of the last .figure in the row */
width: 350px; /* 3*100px + 2*10px margin + 3*2*5px padding */
}
.figure img {
width: 90px;
}
This way you can simply output the images in sequence in a loop without having to worry about where to wrap the rows (the wrapping is handled by CSS; if you don't force the grid to have a maximum width, it will wrap at the right end of the browser window).