[英]How to hide the whole empty columns in php/html
只是想隱藏我表中的整個空列。
表的代碼如下:
<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>
每行每個報告的4列id填充數據,並且我在每個列的表格頂部設置了平均值,所以現在最后一列“Sea Temp”是空的,我怎么能隱藏整個柱?
PS:我正在編碼
$('td:empty').each(function(i){
$(this).hide().parents('weatherTable').find('th:nth-child('+(i+1)+')').hide();
});
但是該代碼隱藏了每個空字段(不想要),例如“Air Temp”列下有不同報表的三行,並且該列中有一行包含數據,另外兩行為空。 從邏輯上講,由於整列不為空,因此不應隱藏此列。
正如在隱藏表格列中回答如果包含的單元格是空的jQuery (由maclema回答),你可以使用這樣的東西:
var numCols = $("th", table).length;
for ( var i=1; i<=numCols; i++ ) {
var empty = true;
//grab all the <td>'s 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>
}
}
試試這個,你就完成了
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(); }
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.