在按鈕上展開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點擊

回答

相關問題