【发布时间】：2019-04-09 19:30:02
【问题描述】：
使用一些遗留代码，并尝试添加一些功能。该页面用于处置上传。页面底部是与处置相关的文件表。这些文件（附件）保存在数据库的表中，每个文件都有自己的 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>
'''
【问题讨论】：
-
1.您将表格、div 和 Bootstrap 混合在一起。我真的把它翻了一番。 2.
loopCount=(#loopCount#+1)是一大堆代码来做loopcount++ -
这实际上是我开始访问此页面之前的代码。这是用于在桌子上上下移动附件的位置变换器。这很好用，不会影响我添加的内容。
-
解决这个问题的方法有很多...您可以在替换按钮中添加一个 data-id 属性，然后使用 jquery .data() 方法或 .attr() 方法检索该属性.这会给你你的 id，然后你可以在你的表单中设置一个隐藏字段。只有一个想法。
-
@Redtopia，谢谢你的建议。我使用 JavaScript 的时间不长，并且仍在学习它的来龙去脉。我明天试试这个。
-
当您说，旧版时，您使用的是哪些版本？
标签： javascript sql coldfusion coldfusion-11 jasny-bootstrap