如何复用现有复制代码替换删除复选框实现邮箱地址一键复制

调整说明 #

• 原删除按钮替换为邮箱复制按钮，复选框保留为选中待复制条目的功能
• 选中多个邮箱时自动用英文逗号拼接，可直接粘贴到邮件收件人栏使用
• 新增操作结果提示，2.5秒后自动消失
• 原有新增行功能完全保留

完整可运行代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>邮箱批量复制工具</title>
<style>
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
    .copied {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px 20px;
        background: #e3fcef;
        color: #00875a;
        border-radius: 4px;
        display: none;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        // 原有新增行逻辑保留
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            if(name && email) {
                var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
                $("table tbody").append(markup);
                // 清空输入框
                $("#name, #email").val('');
            }
        });
        
        // 复制选中邮箱逻辑
        $(".copy-row").click(function(){
            let emailList = [];
            // 遍历选中条目收集邮箱
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    emailList.push($(this).parent().nextAll().eq(1).text().trim());
                }
            });
            if(emailList.length === 0) {
                $(".copied").text("请先选择要复制的邮箱条目").show().fadeOut(2500);
                return;
            }
            // 拼接邮箱内容，英文逗号分隔适配邮件场景
            const copyContent = emailList.join(', ');
            // 复用剪贴板复制逻辑
            const tempInput = $('<input>');
            $('body').append(tempInput);
            tempInput.val(copyContent).select();
            document.execCommand('copy');
            tempInput.remove();
            $(".copied").text(`已成功复制${emailList.length}个邮箱到剪贴板`).show().fadeOut(2500);
        });
    });    
</script>
</head>
<body>
    <div class="copied"></div>
    <form>
        <input type="text" id="name" placeholder="姓名">
        <input type="text" id="email" placeholder="邮箱地址">
        <input type="button" class="add-row" value="新增行">
    </form>
    <table>
        <thead>
            <tr>
                <th>选择</th>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="copy-row">复制选中邮箱</button>
</body> 
</html>

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