just would like to hide the whole empty columns in my table.
只是想隐藏我表中的整个空列。
the code for table is 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 filled in this 4 columns id each report per row, and i've set the averages value on the top of the table for each column, so now the last column "Sea Temp" are empty, how can i hide that whole column?
每行每个报告的4列id填充数据,并且我为每列设置了表格顶部的平均值,所以现在最后一列“Sea Temp”是空的,我怎么能隐藏整个柱?
PS: i was coding
PS:我正在编码
$('td:empty').each(function(i){
$(this).hide().parents('weatherTable').find('th:nth-child('+(i+1)+')').hide();
});
but that code is hide every empty field(don't want), such as there have three rows for different report under the column "Air Temp", and there have one rows contain data in that column, another two rows are empty. logically, this column should not hide due to the whole column is not empty.
但是该代码隐藏了每个空字段(不想要),例如“Air Temp”列下有不同报表的三行,并且该列中有一行包含数据,另外两行为空。从逻辑上讲,由于整列不为空,因此不应隐藏此列。
2 个解决方案
#1
4
As answered in Hiding a table column if the containing cells are empty with jQuery (answered by maclema), you could use something like this:
正如隐藏表列中所回答的,如果包含的单元格是空的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>
}
}
#2
0
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(); }
}
}
#1
4
As answered in Hiding a table column if the containing cells are empty with jQuery (answered by maclema), you could use something like this:
正如隐藏表列中所回答的,如果包含的单元格是空的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>
}
}
#2
0
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(); }
}
}