How to hide all empty columns in php / html
just would like to hide all empty columns in my table.
code for table below:
<table width="100%" border="1" cellspacing="2" cellpadding="2" id="weatherTable">
<tr>
<th align="center" valign="bottom" bgcolor="#CCCCCC"><strong>DISPLAYED REPORTS AVERAGES:</strong></th>
<td align="center" valign=bottom><font size="4"><b><strong>--</strong></b></font></td>
<td align="center" valign=bottom><font size="4"><b><?php echo $row["air_temp"]; ?></b></font></td>
<td align="center" valign=bottom><font size="4"><?php echo $row["sea_temp"]; ?></font></td>
</tr>
<tr>
<th align="center" valign="bottom" bgcolor="#CCCCCC"><strong>Station (ID)</strong></td>
<th align="center" valign="bottom" bgcolor="#CCCCCC"><strong>Time<br>(UTC)</strong></td>
<th align="center" valign="bottom" bgcolor="#CCCCCC"><strong>Air Temp<br>(°C)</strong></td>
<th align="center" valign="bottom" bgcolor="#CCCCCC"><strong>Sea Temp<br>(°C)</strong></td>
</tr>
<tr>
if (($sth-> rowCount())>0) {
foreach (($sth->fetchAll(PDO::FETCH_ASSOC)) as $col) {
?>
<tr>
<td align="right" valign=top><?php echo $col["name"] . " (" . $col["dim_stationID"] . ")"; ?></td>
<td align="center" valign=top><?php $d = $col["date_time"]; $t = explode(" ",$d); $s = explode (":",$t[1]); echo "".$s[0]."".$s[1].""; ?> </td>
<td align="center" valign=top><?php echo $col["air_temp"]; ?></td>
<td align="center" valign=top><?php echo $col["sea_temp"]; ?></td>
</tr>
the data is populated in this 4 id columns of each report per row and I have set the averages at the top of the table for each column, so now the last "Sea Temp" column is empty, how can I hide the whole column?
PS: I was coding
$('td:empty').each(function(i){
$(this).hide().parents('weatherTable').find('th:nth-child('+(i+1)+')').hide();
});
but this code hides every blank field (I don't want to), for example, for the column "Air temperature" there are three rows for different reports, and one column has the data contained in that column, the other two rows are blank. logically, this column should not be hidden due to the fact that the entire column is not empty.
source to share
As stated in Hiding a Table Column, if the contained cells are empty with jQuery (maclema answered), you can use something like this:
var numCols = $("th", table).length;
for ( var i=1; i<=numCols; i++ ) {
var empty = true;
//grab all the <td> of the column at i
$("td:nth-child(" + i + ")", table).each(function(index) {
//check if the td is not empty
if ( $(this).text() != "" ) {
empty = false;
return false; //break out of each() early
}
});
if ( empty ) {
$("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
$("th:nth-child(" + i + ")", table).hide(); //hide header <th>
}
}
source to share
Try this and you are done
function hideEmptyCols(table) {
var rows = $("tr", table).length-1;
var numCols = $("th", table).length;
for ( var i=1; i<=numCols; i++ ) {
if ( $("span:empty", $("td:nth-child(" + i + ")", table)).length == rows ) {
$("td:nth-child(" + i + ")", table).hide();
$("th:nth-child(" + i + ")", table).hide(); }
}
}
source to share