如何解决Razor视图中复制表格消息列仅复制首行的问题？

你遇到的问题核心是HTML中id属性必须唯一，但你在foreach循环里给每一行的<span>和<button>都用了相同的id="messageText"和id="copyButton"。当copyToClipboard函数通过$(element)选择元素时，jQuery只会返回第一个匹配该id的元素，所以每次点击都只会复制第一行的消息。

这里提供两种修复方案，推荐优先使用相对DOM选择器的方案，它更简洁且避免了动态id的维护成本：

方案1：利用相对DOM选择器（推荐） #

步骤1：修改Razor视图代码 #

去掉重复的id，改用class标记消息元素，并在按钮点击时传递当前按钮的引用，这样我们可以在JS中找到同一行的目标消息：

@foreach (var item in Model.Customer) { 
<tr> 
<td> @item.id </td> 
<td > <span class="messageText"> @item.message</span> </td> 
<td > <button class="btn btn-default copy-btn" onclick="copyToClipboard(this)">Copy Message</button> </td> 
<td > @item.name </td> 
<td > @item.lastName </td> 
</tr> 
}
</table>

步骤2：更新JavaScript函数 #

修改copyToClipboard函数，通过传入的按钮元素，向上找到父级的<tr>，再从中定位对应的消息元素：

function copyToClipboard(button) { 
    // 找到当前按钮所在行的消息文本
    var messageText = $(button).closest('tr').find('.messageText').text();
    var $temp = $("<input>"); 
    $("body").append($temp); 
    $temp.val(messageText).select(); 
    document.execCommand("copy"); 
    $temp.remove(); 
}

方案2：使用data属性直接传递内容 #

如果你觉得相对选择器不够直观，也可以给按钮添加data-message属性直接存储消息内容，省去DOM查找步骤：

步骤1：修改Razor视图代码 #

@foreach (var item in Model.Customer) { 
<tr> 
<td> @item.id </td> 
<td > <span> @item.message</span> </td> 
<td > <button class="btn btn-default" onclick="copyToClipboard('@Html.Raw(item.message)')">Copy Message</button> </td> 
<td > @item.name </td> 
<td > @item.lastName </td> 
</tr> 
}
</table>

注意：如果消息包含引号等特殊字符，需要用Html.Raw处理避免HTML语法错误

步骤2：更新JavaScript函数 #

function copyToClipboard(message) { 
    var $temp = $("<input>"); 
    $("body").append($temp); 
    $temp.val(message).select(); 
    document.execCommand("copy"); 
    $temp.remove(); 
}

• 尽量避免在循环中生成重复的id，这是HTML基础规范，会引发各类DOM选择问题
• 推荐使用事件委托绑定点击事件，替代内联onclick，代码更整洁且支持动态添加行：

// 移除按钮上的内联onclick，保留class="copy-btn"
$(document).on('click', '.copy-btn', function() {
    var messageText = $(this).closest('tr').find('.messageText').text();
    var $temp = $("<input>"); 
    $("body").append($temp); 
    $temp.val(messageText).select(); 
    document.execCommand("copy"); 
    $temp.remove(); 
});

内容的提问来源于stack exchange，提问作者Mike