javascript - 单击按钮时展开 cftextarea

Question

好吧，我对 Coldfusion(和 StackOverflow)还很陌生，需要一些帮助。所以我有一个 cfquery 将从数据库中提取值并将其输出到 cftextarea。从数据库返回的每个值都有自己的cftextarea。

<script type=text/javascript>
function expand(){
if (document.getElementById("report").style.width == "1000px"){
document.getElementById("report").style.width = "222.5px";
document.getElementById("report").rows = "1";
}
else{
document.getElementById("report").style.width = "1000px";
document.getElementById("report").rows = "15";
}}
</script>


<cfquery name="getvalues">
SELECT * FROM STUDENT
</cfquery>

<cfset noVals = '#getvalues.recordCount#'>

<cfform>
<!--- find number returned from query, loop number of times, creating a new text area and checkbox each time ---->
<cfloop query="getvalues" startRow=1 endRow="#noVals#">

<cfinput type="checkbox" name="selectedReport">

<cftextarea name="report" rows="1" cols="25">
<cfoutput>
SID: #SID#
GRADE: #GRADE#
FINAL SCORE: #FINAL#
</cfoutput>
</cftextarea>

<img src="assets/images/expand.png" width="35" height="35" style="vertical-align: top;" onclick="expand();">
<br>
</cfloop>

</cfform>

我需要知道如何通过单击它们旁边的图像来扩展这些 cftextarea(最好使用 javascript)。如果 cftextarea 是其原始大小，我希望它能够扩展。如果它被扩展，我希望它缩小到默认大小。任何帮助将不胜感激，到目前为止我唯一能做的就是扩大和缩小顶部 cftextarea。

Answer 1

除非您想根据名称属性编写选择器，否则您需要在元素上拥有 ID。正如 SleepyFox89 所提到的，您需要为每个文本区域指定不同的名称。使其动态化非常容易，因为您已经在循环中，因此只需使用 SID(或任何其他唯一列)并使用它为字段创建动态名称。

您编写的 expand() 函数需要指向单击“展开”图像的特定 textArea。因此，您需要有一个必须从 onclick 事件内的调用传递的属性。

这是工作解决方案(已更新):

<script type=text/javascript>
function expand(reportTextId){
   if (document.getElementById(reportTextId).style.width == "1000px"){
      document.getElementById(reportTextId).style.width = "222.5px";
      document.getElementById(reportTextId).rows = "1";
   }
   else{
      document.getElementById(reportTextId).style.width = "1000px";
      document.getElementById(reportTextId).rows = "15";
   }
}
</script>

<!--- query to fetch student records --->
<cfquery name="getvalues">
   SELECT * FROM STUDENT
</cfquery>

<cfform>    
   <!--- find number returned from query, loop number of times, creating a new text area and checkbox each time ---->
   <cfoutput query="getvalues">
      <cfinput type="checkbox" name="selectedReport#getvalues.SID#" id="chkSelectReport#getvalues.SID#">

      <cftextarea name="report#getvalues.SID#" id="report#getvalues.SID#" rows="1" cols="25">
      SID: #SID#
      GRADE: #GRADE#
      FINAL SCORE: #FINAL#
      </cftextarea>

      <img src="assets/images/expand.png" width="20" height="20" style="vertical-align: top;" onclick="expand('report#getvalues.SID#');">
      <br>
   </cfoutput>    
</cfform>

我希望这会有所帮助。