Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Display 3 cells into 1 cell in html table

Posted on 2014-04-23
8
Medium Priority
?
484 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 9

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 111

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 111

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 111

Accepted Solution

by:
Ray Paseur earned 1000 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 1000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In part one, we reviewed the prerequisites required for installing SQL Server vNext. In this part we will explore how to install Microsoft's SQL Server on Ubuntu 16.04.
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

971 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