在按钮上展开cftextarea点击

好的，我对Coldfusion（和StackOverflow）还是比较新的，需要一些帮助。所以我有一个cfquery，它将从数据库中提取值并将它们输出到cftextarea。从数据库返回的每个值都有自己的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。

来源

2017-02-26 brandoonjen

你没有元素的ID为'report'，所以你的JavaScript不会做任何事情。你需要'' –

我会强烈建议丢弃的ColdFusion特定的标签和使用HTML，文本区域等 –

此外，文本区域的*编辑*数据时更合适。如果这是此表单设计的目标，则最好为这三个值中的每一个使用单独的字段。注意，cfloop看起来过于复杂。要输出查询中的所有记录，只需使用' ..在这里做东西..' – Leigh

除非要根据名称属性编写选择器，否则您需要在元素上有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>

我希望这有助于。

来源

2017-02-27 08:32:27 Anurag

由于他们是CF的新手，关于样式的几个笔记A）不需要捕获事物的结果如QuerySetCell和QueryAddRow，如果它们从不使用。 B）如果意图是输出查询中的所有记录，则不需要嵌套cfloop/cfoutput。只需使用' C）'noVals'变量并不是真的需要，但是如果是的话，'＃getvalues.recordCount＃'''周围不需要引号或井号。优先事项，但它是更清洁的查询代码和输出代码（JS/HTML）分开。 – Leigh

感谢您的反馈@Leigh。我试图保留Brandoonjen编写的原始代码。我已经更新了代码。 – Anurag

是的，保持代码（所以提问者可以理解），同时试图引导他们走向最佳实践是平衡:-) @brandoonjen - 我第二马特的建议切换到纯HTML控制，而不是cfform控件。 CF版本的原因是过时的，并且臭名昭着。 – Leigh

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

我会给每一个textarea的一个唯一的ID，以便它可以很容易地通过脚本针对性（和调试更容易）......毫无疑问，你必须从查询，这将是理想的主键。

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

有许多的方法可以跟踪每个这样的扩展/ standed财产JS变量和隐藏的投入。

来源

2017-02-26 23:39:45 SleepyFox89

在按钮上展开cftextarea点击

回答

相关问题