How to hide a column if no data is present

Question

I have a table that pulls information from the database. To keep it looking neat for the people visiting the webpage, I would like some columns to hide if no information is there.

My table is for results from motorsport events throughout the year. At the beginning of the year there will only be 1 event but by the time it comes to December there will be 20+ results added. So, instead of having lots of empty columns, I want them to be hidden until the title of that event has been added.

I tried to use !empty but this did not work as I wanted to it. It just moved the empty rows to the left leaving the headers not matching the correct results.

Here is my code:

<?php
//MySqli Select Query
$results = $mysqli->query("SELECT *, (u181 + u182 + u183 + u184 + u185 + u186 + u187 + u188 + u189 + u1810 + u1811 + u1812 + u1813 + u1814) AS total FROM results WHERE u18 = '1'");
$title = $mysqli->query("SELECT * FROM closedevents");

while ($t = $title->fetch_assoc()){
echo "<table width=\"1000\" border=\"0\" cellpadding=\"5\" cellspacing=\2\" class=\"entrywriting\" align=\"center\">
<tr align=\"center\">
<td>Overall</td>
<td>Competitor</td>
<td>" . $t["u18a"] . "</td>
<td>" . $t["u18b"] . "</td>
<td>" . $t["u18c"] . "</td>
<td>" . $t["u18d"] . "</td>
<td>" . $t["u18e"] . "</td>
<td>" . $t["u18f"] . "</td>
<td>" . $t["u18g"] . "</td>
<td>" . $t["u18h"] . "</td>
<td>" . $t["u18i"] . "</td>
<td>" . $t["u18j"] . "</td>
<td>" . $t["u18k"] . "</td>
<td>" . $t["u18l"] . "</td>
<td>" . $t["u18m"] . "</td>
<td>" . $t["u18n"] . "</td>
<td>Total</td>
</tr>";
}

//set counter
$counter = 1;
while($row = $results->fetch_assoc()) {
    echo "<tr align=\"center\">";
    echo "<td>" . $counter . "</td>";
    echo '<td>'.$row["competitor"].'</td>';
    echo '<td>'.$row["u181"].'</td>';
    echo '<td>'.$row["u182"].'</td>';
    echo '<td>'.$row["u183"].'</td>';
    echo '<td>'.$row["u184"].'</td>';
    echo '<td>'.$row["u185"].'</td>';
    echo '<td>'.$row["u186"].'</td>';
    echo '<td>'.$row["u187"].'</td>';
    echo '<td>'.$row["u188"].'</td>';
    echo '<td>'.$row["u189"].'</td>';
    echo '<td>'.$row["u1810"].'</td>';
    echo '<td>'.$row["u1811"].'</td>';
    echo '<td>'.$row["u1812"].'</td>';
    echo '<td>'.$row["u1813"].'</td>';
    echo '<td>'.$row["u1814"].'</td>';
    echo '<td>'.$row["total"].'</td>';
    echo "</tr>";
    $counter++; //increment count by 1
}  
echo "</table>";

?> 

So, if there was no title name in u18j, k, l, m, n then them columns would not be shown on the table.

Answer 1

I think you can test varibables and reduc to one echo instructions like this :

<?php
        $counter = 1;
        $out ='';
        while($row = $results->fetch_assoc()) {
            $out .= "<tr align=\"center\">";
            $out .= "<td>" . $counter . "</td>";
            $out .= (isset($row["competitor"]) && !empty(trim($row["competitor"]))?'<td>'.$row["competitor"].'</td>':'';
            ..... etc
            $out .= "</tr>";
            $counter++; //increment count by 1
        }  
        echo $out;

Answer 2

A PHP alternative:

<?php
//MySqli Select Query
$results = $mysqli->query("SELECT *, (u181 + u182 + u183 + u184 + u185 + u186 + u187 + u188 + u189 + u1810 + u1811 + u1812 + u1813 + u1814) AS total FROM results WHERE u18 = '1'");
$title = $mysqli->query("SELECT * FROM closedevents");

$all_cols=array("u18a" => "u181","u18b"=> "u182","u18c"=> "u183","u18d"=> "u184","u18e"=> "u185","u18f"=> "u186","u18g"=> "u187",
        "u18h"=> "u188","u18i"=> "u189","u18j"=> "u1810","u18k"=> "u1811","u18l"=> "u1812","u18m"=> "u1813","u18n"=> "u1814");

while ($t = $title->fetch_assoc()){
    // remember empty cols
    $empty_cols=array();

    echo "<table width=\"1000\" border=\"0\" cellpadding=\"5\" cellspacing=\2\" class=\"entrywriting\" align=\"center\">
    <tr align=\"center\">
    <td>Overall</td>
    <td>Competitor</td>";

    foreach ($all_cols as $col => $value) {
        if (!empty($t[$col])) {
            echo "<td>" . $t[$col] . "</td>";
        } else {
            // set this column as empty for later
            $empty_cols[]=$col;
        }
    } unset($col); unset($value);
    echo "
    <td>Total</td>
    </tr>";
}

//set counter
$counter = 1;
while($row = $results->fetch_assoc()) {
    echo "<tr align=\"center\">";
    echo "<td>" . $counter . "</td>";
    echo '<td>'.$row["competitor"].'</td>';

    foreach ($all_cols as $col => $value) {
        if (!in_array($col, $empty_cols)) {
            // echo non-empty values
            echo '<td>'.$row[$value].'</td>';
        }
    } unset($col); unset($value);

    $counter++; //increment count by 1
}  
echo "</table>";

?> 

Answer 3

Well. I help you in jQuery. You must to include jquery library in your code, obviously. More information: http://jquery.com

First, you must to change your table with an identifier attribute:

echo "<table width=\"1000\" border=\"0\" cellpadding=\"5\" cellspacing=\2\" class=\"entrywriting\" align=\"center\">
<tr align=\"center\">
<td>Overall</td>
<td>Competitor</td>
<td rel='a'>" . $t["u18a"] . "</td>
<td rel='b'>" . $t["u18b"] . "</td>
<td rel='c'>" . $t["u18c"] . "</td>
<td rel='d'>" . $t["u18d"] . "</td>
<td rel='e'>" . $t["u18e"] . "</td>
<td>Total</td>
</tr>";

And down, in your while, the same:

echo '<td rel="a">'.$row["u181"].'</td>';
echo '<td rel="b">'.$row["u182"].'</td>';
echo '<td rel="c">'.$row["u183"].'</td>';
echo '<td rel="d">'.$row["u184"].'</td>';
echo '<td rel="e">'.$row["u185"].'</td>';

Then the javascript magic:

// select the first row and found all td in the first row
$('table.entrywriting tr:first-child').find('td').each(function() {
     var text = $(this).text(); // get the inner text
     if(!text) { // if text is empty
         var position = $(this).attr('rel'); //position like a, b, c...
         // iterate all tds in this position
         $('table.entrywriting td[rel="'+position+'"]').each(function() {
               $(this).hide(); // hide the td with the position
         });
     }
});

Good luck!