单击按钮时展开 cftextarea答案

【问题标题】：Expand cftextarea on button click单击按钮时展开 cftextarea
【发布时间】：2017-02-26 23:01:52
【问题描述】：

好的，我对 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 为 report 的元素，所以你的 JavaScript 不会做任何事情。你需要<cftextarea id="report" name="report" rows="1" cols="25">
我强烈建议删除 ColdFusion 特定标签并使用 html、textarea 等
另外，textarea 更适合编辑数据。如果这是此表单的设计目的，最好为三个值中的每一个使用单独的字段。旁注，cfloop 看起来过于复杂。要输出查询中的所有记录，只需使用<cfoutput query="yourQuery">.. do stuff here ..</cfoutput>

标签： javascript html css coldfusion

【解决方案1】：

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

您编写的expand() 函数需要指向单击“展开”图像的特定文本区域。所以你需要有一个属性，你必须从 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>

我希望这会有所帮助。

【讨论】：

由于它们是 CF 的新手，关于样式 A 的一些说明）如果从未使用过 QuerySetCell 和 QueryAddRow 之类的东西，则无需捕获它们的结果。 B) 如果意图输出查询中的所有记录，则不需要嵌套的 cfloop/cfoutput。只需使用<cfoutput query="..."> C) noVals 变量并不是真正需要的，但如果需要，则不需要在#getvalues.recordCount# 周围使用引号或井号 D) 严格来说是一个偏好问题，但保留查询代码更简洁和输出代码 (JS/HTML) 分开。
感谢@Leigh 的反馈。我试图保留 Brandoonjen 编写的原始代码。我已经更新了代码。
是的，保留代码（以便提问者可以理解）同时尝试引导它们采用最佳实践是平衡的 :-) @brandoonjen - 我同意马特关于切换到纯 html 控件而不是 cfform 控件的建议.原因是 CF 版本已经过时并且臭名昭著。
出于同样的原因，我也更喜欢纯 html 控件而不是 cfform。
另外，就控件而言，我决定按照建议切换到纯 html 控件。谢谢你的一切。

【解决方案2】：

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

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

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

您可以通过多种方式跟踪每个扩展/固定属性，例如 js 变量和隐藏输入。

【讨论】：