ボタンをクリックして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> 

私は彼らの横に画像をクリックして（好ましくはJavaScriptを使用して）これらのcftextareasを拡張する方法を知っておく必要があります。 cftextareaが元のサイズの場合、私はそれを展開したいと思います。展開されている場合は、デフォルトのサイズに縮小してください。どんな助けでも大いに感謝されます。私がこれまでにやったことは、トップのcftextareaを拡大して縮小することだけです。

Answer 1

名前属性に基づいてセレクタを作成する場合を除き、要素にIDを設定する必要があります。 SleepyFox89で述べたように、textAreaごとに異なる名前を付ける必要があります。動的にするのはループ内にあるので、SID（またはその他の一意の列）を使用してフィールドの動的な名前を作成するだけです。

「」の機能は、「展開」画像がクリックされた特定の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> 

：ここ

は、作業溶液（更新）です。

Answer 2

これはフロントエンドの質問です。そのため、ColdFusionがこれらのテキスト領域を作成しているという事実は特に重要ではありません。

私は各テキストエリアに固有のIDを与えて、スクリプトで簡単にターゲットを絞ることができます（そしてデバッグも簡単です）...理想的なクエリの主キーがあることは間違いありません。

画像のonClickイベントを、特定のテキストエリアをターゲットとするスクリプトに設定し、サイズを調整します。

js変数や隠された入力など、それぞれの拡張プロパティまたはスタンドプロパティを追跡する方法はいくつかあります。