Solved

Display 3 cells into 1 cell in html table

Posted on 2014-04-23
8
413 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 108

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 108

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 108

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now