使用一些旧代码，并尝试附加一些功能。该页面用于处置上载。页面底部是与处置有关的文件表。这些文件（附件）保存在数据库的表中，每个文件都有其自己的ID。
客户希望在表中的每个条目旁边的每一行上添加一个“替换”按钮（已经有一个下载和删除按钮）。单击后，将显示文件上传表单。客户端上载的文件应该用ID替换表中的附件。但是，当我单击“替换”按钮时，它会在表格顶部显示替换表格的表格。
如何通过ID（通过数据库表）将按钮链接到表单？
这是桌子... '''
<table class="table table-striped table-bordered table-hover table-hover table-full-width">
<thead>
<tr>
<th class="center hidden-xs"></th>
<th style="display:none;">ID</th>
<th>File Name</th>
<th>Figure Name</th>
<th>Date Uploaded</th>
<th>Rearrange Order</th>
</tr>
</thead>
<tbody>
<cfset loopCount = 1 />
<cfset ids = '' />
<cfset allowDown = #qAttachments.recordCount# />
<cfloop query = "qAttachments">
<cfset ID = "#qAttachments.id#">
<cfset fileName="#qAttachments.filename#">
<cfset fileExt=ListLast(fileName,".")>
<cfset filePath = "/secure/edFiles/edAttachments/ED_#session.module.id#/#url.edID#/#fileName#"><!---removed.pdf--->
<tr>
<div id="replaceAtt" style="display: none" >
<div class="col-md-6">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-group">
<div class="form-control uneditable-input">
<i class="fa fa-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<div class="input-group-btn">
<div class="btn btn-blue btn-file">
<span class="fileupload-new"><i class="fa fa-folder-open-o"></i> Select file</span>
<span class="fileupload-exists"><i class="fa fa-folder-open-o"></i> Change</span>
<input type="file" id="replaceEDFile" name="replaceEDFile" title="Select File to Replace #ID#">
</div>
<a href="" class="btn btn-blue fileupload-exists" data-dismiss="fileupload">
<i class="fa fa-times"></i> Remove
</a>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class = "btn btn-blue btn-block" value="#ID#" type = "submit" name ="replaceFile" onClick="location.href='edFormData.cfm?replaceFile=#ID#&m=#url.m#&edID=#url.edID#&#r#&ai=#url.ai#'">
Upload File <i class = "fa fa-arrow-circle-right" ></i>
</div>
</div>
</div>
</tr>
<tr>
<td class="center hidden-xs">
<a href="#filePath#"><button type = "button" class="fa" name="download" id="download" value="#ID#" onClick="location.href='edFormData.cfm?download=#ID#&m=#url.m#&edID=#url.edID##r#&ai=#url.ai#'"> <img src="../assets/Icons/viewdoc.png"></button></a>
<cfif readonly NEQ "readonly">
<button type = "button" class="fa" name="Delete" id="Delete" value ="#ID#" onClick="location.href='edFormData.cfm?del=#ID#&m=#url.m#&edID=#url.edID##r#&ai=#url.ai#'">
<img src="../assets/Icons/trash-o_ff0400_20.png"></button>
<button id="replace" type = "button" class ="replace" name="replace" value="#ID#" title="Replace attachment #ID#" >
<img src="../assets/Icons/file_replace_000000.png">
</button>
</cfif>
</td>
<td style="display:none;">#ID#</td>
<td id="file_#ID#">#qAttachments.filename#</td>
<td id="figure_#ID#">#qAttachments.figureName#</td>
<td id="uploaded_#ID#">#qAttachments.uploaded#</td>
<td>
<cfif loopCount NEQ 1>
<div class = "btn btn-green btn-block" id="moveUP_#ID#">Move Up</div><br />
</cfif>
<cfif loopCount NEQ allowDown>
<div class = "btn btn-blue btn-block" id="moveDown_#ID#">Move Down</div>
</cfif>
</td>
</tr>
<cfif loopCount NEQ allowDown>
<cfset ids = #ids#&"#ID#," />
<cfelse>
<cfset ids = #ids#&"#ID#" />
</cfif>
<cfset loopCount=(#loopCount#+1) />
</cfloop>
<input type="hidden" id="possibleIDs" value="#ids#" />
</tbody>
</table>
'''
这是JavaScript ... '''
<script>
$(document).ready(function(){
$('.replace').click(function(e){
e.preventDefault();
$("#replaceAtt").slideToggle('fast');
});
});
</script>
'''
答案 0 :(得分：1)
这不是完整的答案，而是更多的代码审查/注释。此代码块中发生了很多事情。正如James所说，您的代码将表和div混合在一起，并引发了一些Bootstrap。有很多变量在其中浮动，而不清楚它们在哪个范围内（如readonly），以及很多不需要的变量（如loopcount和{{1} }。还有一些不需要引号和磅的变量（例如allowDown可以只是<cfset ID = "#qAttachments.filename#">），还有两个在代码中直接使用URL变量的地方。还有其他一些事情。
这是旧代码，所以我完全理解。就是这样，如果是CF11代码，自从它第一次编写以来，可能已经在很多方面进行了改进。在这里成为星期一早上的四分卫很容易。
也就是说，您可以在<cfset ID = qAttachments.ID>标签之间显着减少此页面中的操作。
为简化起见，我忽略了您正在循环的大多数HTML。
由于您使用的是查询循环，因此无需跟踪循环计数，因为它已经成为tbody中查询结果的一部分。而且您不需要设置currentRow，因为您只需要引用一次即可。您真正需要做的唯一一件事就是初始化allowDown，以便可以ids而不是试图弄清楚如何处理尾随逗号。
ListAppend()同样，所有这些只是概念代码，可以更好地构建循环。并请注意，由于这是CF11，所以最好使用cfsccript而不是cftags进行循环。我建议将CFML代码与显示代码分开，也许使用CF函数，该函数可以返回一组数据以循环显示。
我要评论的最后一件事是使用<cfset ids="">
<cfoutput>
<cfloop query="qAttachments">
<!--- HTML Display Code In This Block --->
EXAMPLE: WE ARE ON ID = #id#
<!--- Move Buttons --->
<cfif currentRow NEQ 1> MOVE UP </cfif>
<cfif currentRow NEQ qAttachments.recordcount> MOVE DOWN </cfif>
<br>
<!--- --->
<!--- Build ID list for hidden form. --->
<cfset ids = ListAppend(ids,id)>
</cfloop>
<br>
< hiddenFormInput > possibleIDs = "#ids#" < /hiddenFormInput >
</cfoutput>
作为通用名称。在循环内部，您使用了3个不同的ID变量：1）ID 2）查询中的session.module.id 3）和一个ID变量（基于循环的查询） ID。在这种特定情况下，您将获得想要的值，但是在页面上具有多个具有相同名称的变量通常是个坏主意，而ID则很容易做到。所要做的只是改变评估顺序，这将使您头疼，难以调试。
答案 1 :(得分：0)
我要感谢所有对此发表评论和提供帮助的人。我知道代码充其量是令人讨厌的，但是当我开始弄乱循环中已有的内容时，其他地方就会中断。但是我确实找到了一个问题（为什么要比我聪明得多），我为什么不能将按钮链接到div并显示该表的正确上载表格！是图像...是的，图像。我决定让JS刚按下按钮时就发出ID名称警报。经过一番黑客攻击后，有时我可以使它正常工作，而其他时间则将其淘汰。借助一些“检查元素”魔术，我们发现它根据我单击按钮的位置来输出ID或NaN。这使我们意识到图像本身需要一个ID，因为单击时试图将其拉出。
所以，这就是我更改为上面发布的代码的地方：
首先，我将保存上载表单的div从循环中拉出，因此我没有多个表单填充，并且可以切换附件替换而无需重新加载在屏幕上有一堆移动内容的页面。
第二，实际的按钮本身：
<button type = "button" class ="replace" name="replace" id="replace_#ID#" value="#ID#" title="Replace #qAttachments.figureName#" >
<!--- Gave the image an ID, so if it is clicked it can still split properly. --->
<img id="replaceImg_#ID#" src="../assets/Icons/file_replace_000000.png">
</button>
第三，JavaScript。
<script>
$('[id^="replace_"], [id^="replaceImg_"]').click(function(e){
// Split the ID to get the number (lines up with DB ID).
var replaceID = e.target.id.split("_")[1];
// Set this to let the user know which file is being replaced (by figure name).
var figNameRep = $('#figure_'+replaceID).text();
// If the upload replacement is not showing yet, make it show now.
if ($('#replaceAtt').css("display") == 'none'){
$('#replaceAtt').slideToggle("fast");
}
// Don't worry about hiding and unhiding, just switch the IDs around as needed.
$('#figNameReplace').text("Replacing file for Figure Name: " + figNameRep);
$('#replaceFile').val(replaceID);
});
</script>
再次感谢大家的投入。大家都建议我尝试一下这些想法，尽管我无法让他们付诸实践（更多地是对我自己的技能的评论），但它确实教会了我一些新的工具和方法。你们真棒！