我在网页中使用谷歌可视化表格。对于每个表元素,select事件已设置如下:
google.visualization.events.addListener(core_table_stats, 'select', selectHandler);
处理程序如下,它根据所选行的内容打开一个新面板:
function selectHandler(e){
var code=data.getValue(core_table_stats.getSelection()[0].row,0);
var url="index.jsp?no_menu=true&dashboard=byCodeQualifier&messageCode="+code+"&messageQualifier=SYNC_FAIL";
$('#detailFrame').attr('src', url);
$('#detailPanel').show('slide',{ direction: 'down' },400);
}
但是,我面临的问题是,即使在打开的面板上,基页中的表core_table_stats的标题也是可见的。如何隐藏这些标题?
这是正在使用的html。
<table width='100%'>
<tr>
<td align='center' valign='center' width='350'>
<ul class="nav nav-pills" style="width:300px;margin:auto;">
<li class="well well-sm" style="width:300px;margin:auto;pading:2px;">CP > APP<span class="badge" id="in" style="font-size:large;"></span></li>
</ul>
</td>
<td align='center' valign='center' width='350' colspan='2'>
<ul class="nav nav-pills" style="width:300px;margin:auto;">
<li class="well well-sm" style="width:300px;margin:auto;pading:2px;">APP> APP2 <span class="badge" id="in" style="font-size:large;"></span></li>
</ul>
</td>
<td align='center' width='275'>
<ul class="nav nav-pills" style="width:350px;margin:auto;">
<li class="well well-sm" style="width:300px;margin:auto;">Success <span class="badge" id="success-int" style="font-size:large;"></span></li>
</ul>
</td>
</tr>
<tr>
<td valign="top">
<br/>
<div class="panel panel-warning" style="width:380px;margin:auto;">
<div class="panel-heading" style="background-color: #0174DF">
<h3 class="panel-title">Fallouts</h3>
</div>
**<div class="panel-body">
<div id="core_stats_table" style="width: 360px;height: 450px;"></div>**
</div>
</div>
</td>
<td align='center' width='325' style="vertical-align:top;">
<h4>APP1</h4>
<div id="pass_fail" class="well well-sm" style="width: 280px; height: 200px;"></div>
<div id="core_stats" class="well well-lg" style="width: 280px; height: 300px;"></div>
</td>
<td align='center' width='325' style="vertical-align:top;">
<h4>Turbo Map</h4>
<div id="tm_pass_fail" class="well well-sm" style="width: 280px; height: 200px;"></div>
<div id="tm_stats" class="well well-lg" style="width: 280px; height: 300px;"></div>
</td>
<td>
<br/>
<div class="panel panel-warning" style="width:380px;margin:auto;">
<div class="panel-heading" style="background-color: #0174DF">
<h3 class="panel-title">Fallouts</h3>
</div>
<div class="panel-body">
<div id="tm_stats_table" style="width: 360px;height: 450px;"></div>
</div>
</div>
</td>
</tr>
</table>
<div id='detailPanel' style='padding: 15px;display:none;position:fixed;left:0px;top:100px;height:800px;width:100%;'>
<a href='#' onclick="$('#detailPanel').hide('slide',{ direction: 'down' },250);return false;">Close</a><br/>
<iframe id='detailFrame' name='detailFrame' width='100%' height='790'></iframe>
</div>
有什么想法吗?如果问题没有完全理解,请告诉我