如何将表格内的右键下载改为一键点击下载按钮

问题原因 #

你之前的代码是通过右键点击file-item时动态生成悬浮菜单并绑定下载事件，把按钮直接移入td后，原来的事件绑定逻辑只针对右键生成的菜单按钮生效，不会作用到td里的静态按钮，所以功能失效。

解决方案 #

直接给表格内的下载按钮绑定下载逻辑，推荐用事件委托（兼容静态/动态生成的按钮），具体实现如下：

1. 调整HTML结构

在表格对应单元格中添加下载按钮（可静态写死或动态生成）：

<!-- 保留按钮模板（可选，用于动态生成） -->
<div id="menu-file-clone" style="display: none;">
    <a href="javascript:void(0)" class="custom-menu-list file-option download"><span><i class="fa fa-download"></i> </span>Download</a>
</div>

<!-- 表格示例 -->
<table>
  <tr>
    <td class="file-item" data-id="1">文件名称1</td>
    <!-- 静态添加下载按钮，data-id和对应file-item保持一致 -->
    <td><a href="javascript:void(0)" class="download" data-id="1"><span><i class="fa fa-download"></i></span> Download</a></td>
  </tr>
  <tr>
    <td class="file-item" data-id="2">文件名称2</td>
    <td><a href="javascript:void(0)" class="download" data-id="2"><span><i class="fa fa-download"></i></span> Download</a></td>
  </tr>
</table>

2. 替换JS逻辑

移除原来的右键菜单绑定代码，改用事件委托处理下载点击：

// 事件委托：监听所有.download按钮的点击事件
$(document).on('click', '.download', function(e) {
    e.preventDefault();
    // 获取当前按钮对应的文件ID
    const fileId = $(this).attr('data-id');
    // 打开下载链接
    window.open(`download.php?id=${fileId}`);
});

3. 动态生成按钮（可选）

如果表格行是动态加载的，可通过JS自动给每行添加下载按钮：

$(function() {
    // 遍历所有file-item，给对应行插入下载按钮
    $('.file-item').each(function() {
        const fileId = $(this).attr('data-id');
        // 克隆模板按钮并设置ID
        const downloadBtn = $('#menu-file-clone .download').clone().attr('data-id', fileId);
        // 将按钮插入到当前单元格的下一个td中
        $(this).next().append(downloadBtn);
    });

    // 同样用事件委托绑定下载事件
    $(document).on('click', '.download', function(e) {
        e.preventDefault();
        const fileId = $(this).attr('data-id');
        window.open(`download.php?id=${fileId}`);
    });
});

内容的提问来源于stack exchange，提问作者Ravi Shankar Pandey