javascript - 单击按钮展开cftextarea

好的，我对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>

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

最佳答案

除非要基于名称属性编写选择器，否则需要在元素上具有ID。如SleepyFox89所述，您需要为每个textArea使用不同的名称。动态化非常容易，因为您已经在循环中，因此只需使用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>

我希望这有帮助。