Solved

Display 3 cells into 1 cell in html table

Posted on 2014-04-23
8
454 Views
Last Modified: 2014-04-25
Hi all.

I have the following html table (see attached screenshot) that displays 3 types of measurements for the same record, it displays as 3 rows. I would like to one row instead of 3, so all 3 data fields can appear in one cell only.

Below is the code that gets the data for the table and the html code that creates the table.

Gets data for the table:
<?php 

      $smt = $db-> prepare('SELECT Builder, Community, ModelName, ModelNumber, WindowSills_Default.Qty,WindowSills_Length.Length, WindowSills_Default.Width,Case When WindowSills_Custom.Qty = 0 Then "" Else WindowSills_Custom.Qty End As CustomQty, Case WHEN WindowSills_Custom.Qty = 0 Then "" Else WindowSills_Length.Length End As CustomLength, Case When WindowSills_Custom.Qty = 0 Then "" Else WindowSills_Custom.Width End As CustomWidth,Concat(Users.firstname, " ", Users.lastname) As FieldSuper, Concat(ProjectManagers.FirstName, " ", ProjectManagers.LastName) As ProjectManager
FROM BuilderCommunity LEFT OUTER JOIN FieldSuperAssignment ON BuilderCommunity.BuilderCommunityID = FieldSuperAssignment.BuilderCommunityID LEFT OUTER JOIN Users ON FieldSuperAssignment.UserID = Users.userid LEFT OUTER JOIN ProjectManagerAssignment ON BuilderCommunity.BuilderCommunityID = ProjectManagerAssignment.BuilderCommunityID LEFT OUTER JOIN ProjectManagers ON ProjectManagerAssignment.ProjectManagerID = ProjectManagers.ProjectManagerID LEFT OUTER JOIN Models ON BuilderCommunity.BuilderCommunityID = Models.BuilderCommunityID LEFT OUTER JOIN WindowSills_Default ON Models.Modelid = WindowSills_Default.Modelid LEFT OUTER JOIN WindowSills_Length ON WindowSills_Default.LengthID = WindowSills_Length.LengthID LEFT OUTER JOIN WindowSills_Custom ON Models.Modelid = WindowSills_Custom.Modelid AND WindowSills_Length.LengthID = WindowSills_Custom.LengthID  WHERE  BuilderCommunity.Status = "Active" 
ORDER BY Builder, Community, ModelName, ModelNumber,Length DESC');
      $smt->execute();
      $data = $smt->fetchAll();
?> 

Open in new window


HTML code for table:
<html>
<script type="text/javascript" src="js/jquery-latest.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> 
  <link rel="stylesheet" href="js/style.css" type="text/css" />
<table id="Table" class="tablesorter"> 
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th align = "center" colspan="3">Default</th>

</tr>
<tr> 
    <th>Builder</th> 
    <th>Community</th> 
    <th>Model Name</th>  
    <th>Model Number</th> 
    <th>Qty</th>         
    <th>Length</th> 
    <th>Width</th> 
    <th>Field Super</th>
    <th>Project Manager</th>

</tr> 
</thead> 
<tbody> 
<?php foreach ($data as $row){
  echo "<tr>";
  
  echo "<td>".html_escape($row['Builder'])."</td>";
  echo "<td>".html_escape($row['Community'])."</td>";
  echo "<td>".html_escape($row['ModelName'])."</td>";
  echo "<td>".html_escape($row['ModelNumber'])."</td>";
  echo "<td>".html_escape($row['Qty'])."</td>";     
  echo "<td>".html_escape($row['Length'])."</td>";
  if ($row['Width']== "")
  {
	echo "<td>".html_escape($row['Width']).  "</td>"; 
  }
  else
  {
  	echo "<td>".html_escape($row['Width']).  "''</td>";
  }

  echo "<td>".html_escape($row['FieldSuper'])."</td>";
  echo "<td>".html_escape($row['ProjectManager'])."</td>";
  
  echo "</tr>";
  }

?> 

</tbody> 
</table> 	
</html>

Open in new window



Any idea how I can do this?
Screen-Shot-2014-04-23-at-6.46.0.png
0
Comment
Question by:Sim1980
8 Comments
 
LVL 4

Expert Comment

by:Jim Riddles
ID: 40019789
When you say it contains 3 types of measurements for the same record, which measurements are you speaking of?  It would appear that you mean Quantity, Length and Width.

You can achieve what you want in different ways.  As Padas mentioned, you could alter your query to concatenate the 3 measurement fields into one field for your table.  If you need to have the fields separated for other uses, then simply alter your HTML code to produce one table data cell and place the 3 measurement fields within that one cell.  It would look something similar to the following:

echo "<td>" . html_escape($row['Qty']) . " / " . html_escape($row['Length']) . " / " . html_escape($row['Width']) . "</td>";

Don't forget to alter your table headers to only have one table header cell for all three fields. Lines 20-22 would become something similar to the following:

<th>Qty / Length / Width</th>

Note that I have used " / " as the separator, but you may use whatever you want.  This is assuming that those are the three measurement fields you are talking about.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40019828
If you get three rows in the HTML document, it would seem to happen because the query returned three rows in the results set.  Are you sure you're getting the data you want and expect from the query?
0
 

Author Comment

by:Sim1980
ID: 40019853
Thank you for the posts! My query is returning 3 rows for each record, which is correct, but I don't want to display 3 rows in the HTML table. I want to display 1 row:

Currently: SALLY  5  76" 4"
                 SALLY  3  54" 5"
                 SALLY  6  36" 4"

What I want is one row:

 SALLY  5  76" 4"
              3  54" 5"
              6  36" 4"
Where the measurements are in the same cell and therefore one row.
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 109

Expert Comment

by:Ray Paseur
ID: 40019958
Looks like you need to retrieve all three rows, so a GROUP clause might not be helpful.  Maybe the display logic that creates the HTML needs to be modified so that the "SALLY" part is displayed only once (when it changes from the previous value) and suppressed otherwise.
0
 

Author Comment

by:Sim1980
ID: 40020128
Yeah that's where I'm stuck.
0
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 250 total points
ID: 40020277
I can try to give you a general design pattern, but I don't have your results set, so I cannot give you anything that is exact.  But maybe you can get your solution from this generalized example.
http://iconoun.com/demo/temp_sim1980.php

<?php // demo/temp_sim1980.php
error_reporting(E_ALL);
echo '<pre>' . PHP_EOL;

/**
 * SEE http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28418802.html
 *
 * Currently: SALLY  5  76" 4"
 *            SALLY  3  54" 5"
 *            SALLY  6  36" 4"
 *
 * Desirable: SALLY  5  76" 4"
 *                   3  54" 5"
 *                   6  36" 4"
 */

// SIMULATED TEST DATA
$rows = array
( array( 'nom' => 'BALLY', 'num' => 'A')
, array( 'nom' => 'SALLY', 'num' => '5')
, array( 'nom' => 'SALLY', 'num' => '3')
, array( 'nom' => 'SALLY', 'num' => '6')
, array( 'nom' => 'WILLY', 'num' => 'Z')
)
;

// CREATE AN HTML TABLE DOCUMENT
$out = '<table>' . PHP_EOL;

// STORE AN IMPOSSIBLE VALUE FOR THE PREVIOUS 'nom'
$old = FALSE;

// ITERATE OVER THE ROWS OF THE RESULTS SET
foreach ($rows as $row)
{
    $out .= '<tr>';

    // WHEN TO SHOW A NEW NAME IN THE ROW
    if ($row['nom'] != $old)
    {
        $old = $row['nom'];
        $out .= '<td>' . $row['nom'] . '</td>';
    }
    else
    {
        $out .= '<td>' . NULL        . '</td>';
    }

    // ADD IN THE REST OF THE ROW DATA HERE
    $out .= '<td>' . $row['num'] . '</td>';

    // CLOSE OFF THE ROW
    $out .= '</tr>' . PHP_EOL;
}

// CLOSE OFF THE TABLE AND SHOW THE WORK PRODUCT
$out .= '</table>' . PHP_EOL;
echo $out;

Open in new window

HTH, ~Ray
0
 
LVL 17

Assisted Solution

by:davebytes
davebytes earned 250 total points
ID: 40020307
You don't show enough data for full results from your DB, nor enough of a visual result, so I'm just making a leap as to what you're trying to really do.

I'm coding on the fly in a browser, so the chance of anything compiling right off the bat is 50/50. :)

This DOES assume the data row array is pre-sorted (hopefully via SQL, but you can do it in PHP easily with any sort algorithm..) on the unique column.

For my example, I'll assume "Builder" is the unique column.

<?php
$lastValue = ''; // start empty, assuming empty is INVALID.

foreach ($data as $row) {
  // for styling support, have css tag that tells you if row is repeating or new value.
  if ($row['Builder'] == $lastValue) // repeated
  {
    echo "<tr class='valRepeat'>";
    echo "<td>&nbsp;</td>"; // or whatever you'd like in the empty cell
  }
  else // new value
  {
    $lastValue = $row['Builder'];
    echo "<tr class='valNew'>";
    echo "<td>".html_escape($row['Builder'])."</td>";
  }

  //... continue whatever normal output from there.

Open in new window


And your css can do whatever it needs to make the new (or repeat) rows look visually different.  Different bg color on the new line, or hide top/bottom cell borders on repeat lines, etc.

Hope that helps.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

789 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question