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>

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

Answer 1

除非您想根据名称属性编写选择器，否则您需要在元素上具有ID。正如SleepyFox89所提到的，每个textArea需要有不同的名称。将它设置为动态非常简单，因为您已经在循环中，所以只需使用SID（或任何其他唯一列）并使用它为字段创建动态名称。

您编写的expand()函数需要指向特定的textArea，其中＆＃39;展开＆＃39;点击了图片。所以你需要有一个属性，你必须在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>

我希望这会有所帮助。

Answer 2

这是一个前端问题，所以我想说ColdFusion创建这些文本区域的事实并不是特别相关。

我会给每个textarea一个唯一的ID，以便它可以很容易地被脚本定位（并且调试更容易）......毫无疑问，你有一个理想的查询主键。

将图像的onClick事件设置为以特定文本区域为目标的脚本并调整大小。

有很多方法可以跟踪js变量和隐藏输入等扩展/标准属性。

单击按钮展开cftextarea

2 个答案: