Javascript 如何动态调整spotfire文本区域的大小

即使我隐藏了过滤器，文本区域中的过滤器也会占用空间。我想隐藏整个文本区域，以便有更多的空间进行可视化

文本区域应该是动态的，若用户想要任何过滤器，那个么应该有一个切换按钮来帮助打开过滤器，若他们不想要，那个么文本区域应该被隐藏

   <SpotfireControl id="c970da0f1b5549a88d27f368f6770f2f" />
<DIV id="showHidecontainer">
<TABLE style="WIDTH: 550.5pt" cellSpacing=0 cellPadding=0 width=751 border=0> 
<COLGROUP> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<COL style="WIDTH: 21.5pt; mso-width-source: userset; mso-width-alt: 1133" width=31> 
<COL style="WIDTH: 118pt; mso-width-source: userset; mso-width-alt: 5741" width=157> 
<TBODY> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 240pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Metric Selection</FONT></STRONG></P></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 118pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Channel</FONT></STRONG></P></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; WIDTH: 21.5pt; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" width=31></TD> 
<TD class=xl65 style="BORDER-TOP: windowtext 1.5pt solid; BORDER-RIGHT: windowtext 1.5pt solid; WIDTH: 128pt; BORDER-BOTTOM: windowtext 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: #3166ff" width=157> 
<P align=center><STRONG><FONT color=#ffffff size=4 face=Calibri>Trade Panel Selection</FONT></STRONG></P></TD> 


<TR style="HEIGHT: 15pt" height=20> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: windowtext; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><P><STRONG><U>Metric Selection:</U></STRONG></P>
<P><STRONG>Metric:</STRONG> <SpotfireControl id="96184134b79e4dd4a0fb06aba8af4442" /> </P>
<P><STRONG>Threshold: </STRONG><SpotfireControl id="0695ba526b4045a5ba87408ff3b508e3" /></P>
<P><STRONG>Plan Type: </STRONG><SpotfireControl id="b8617a4560804448823d6bd61bba9235" /></P></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="8f9ef7c8a16d451889733e5d3d9f8a43" /></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD class=xl66 style="BORDER-RIGHT: windowtext 1.5pt solid; BORDER-TOP-COLOR: #f7fdfa; BORDER-BOTTOM: black 1.5pt solid; BORDER-LEFT: windowtext 1.5pt solid; BACKGROUND-COLOR: transparent" rowSpan=7><FONT size=4 face=Calibri><SpotfireControl id="1e977330ab2b4e1e94bfd62c710b11ef" /></FONT></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15pt" height=20> 
<TD style="HEIGHT: 15pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=20></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 
<TR style="HEIGHT: 15.75pt" height=21> 
<TD style="HEIGHT: 15.75pt; BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent" height=21></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD> 
<TD style="BORDER-TOP-COLOR: #f7fdfa; BORDER-LEFT-COLOR: #f7fdfa; BORDER-BOTTOM-COLOR: #f7fdfa; BORDER-RIGHT-COLOR: #f7fdfa; BACKGROUND-COLOR: transparent"></TD></TR> 


</TBODY></TABLE> </div>


$("#c970da0f1b5549a88d27f368f6770f2f").on('change',function(){
 $("option:selected",this).text()=="Show"?
  $("#showHidecontainer").fadeIn():
  $("#showHidecontainer").fadeOut()
})

公制选择
频道
交易面板选择
 度量选择：

 指标：
 阈值：
 计划类型：
$（“c970da0f1b5549a88d27f368f6770f2f”）.on（'change'，function（）{
$（“选项：选中”，此）.text（）=“显示”？
$（“#showHidecontainer”）.fadeIn（）：
$（“#showHidecontainer”）.fadeOut（）
})

您的$（“c970da0f1b5549a88d27f368f6770f2f”）是什么类型的定点火力控制？如果是下拉列表，您可以执行以下操作：

$('#c970da0f1b5549a88d27f368f6770f2f').on('DOMSubtreeModified',function(){
    seleciton = $(this).text()
    if (seleciton=="show"){$("#showHidecontainer").show()}
    if (seleciton=="hide"){$("#showHidecontainer").hide()}
})

---

此方法适用于7.5+，因为它使用HTML5

请提供更多信息，如您试图实现目标的代码。请共享您的代码。我建议使用书签调整整个文本区域的大小，或者如果您正在进行引导分析，请使用不同的设计方法。