js realizes the function of clicking the button to copy the text

describe

I want to try to click the button to copy the text to the clipboard. I searched a lot from the Internet. I don’t know if it’s a problem with the operation or other reasons. Anyway, it doesn’t work normally.
There are plug-ins on the Internet, but that plug-in is also invalid when placed in the table of datatables. Later, after many attempts, it can be regarded as writing a workable one.

accomplish

This is in the table rendered by the datatables plug-in. I added a copy button to the data in the table, and then copied the contents of the table to the clipboard.
html:

"columns": [
                    {
    
    
                        "data": "", "defaultContent": "", "render": function (data, type, row) {
    
    
                            let id = row['id'];
                            var name = row['name'];
                            let pp = ' <input class="copy"  id="' + id + '" value="' + name + '"/>';
                            let text = '<p>' + name + '</p>';
                            let ccc = "<button class='layui-btn layui-btn-sm' οnclick=\"copyText('" + id + "')\">copy</button>"
                            return text + pp + ccc;
                        }
                    },
                    {
    
    
                        "data": "url", "defaultContent": "", "render": function (data, type, row) {
    
    
                            let id = row['id'];
                            id += '2';
                            var url = row['url'];
                            let pp = ' <input class="copy" style=" "  id="' + id + '" value="' + url + '"/>';
                            let text = '<p>' + url + '</p>';
                            let ccc = "<button class='layui-btn layui-btn-sm' οnclick=\"copyText('" + id + "')\">copy</button>"
                            return text + pp + ccc;
                        }
                    },
                ],

In the above code, the p tag is used to display the original content on the page, and then the input is used to accept the content to be copied. After the copy button is clicked, the id of the input is passed to the js method, and then the input attribute is found through the id, and the content of the input is copied to the clipboard .

js code:

    function copyText(id) {
    
    
        var Url2 = document.getElementById(id);
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        layer.msg('复制成功')
    }

Here, if you feel that the display of the input box on the page affects the appearance, you can set the size of the input to 0.01px or smaller. If you set the hidden attribute, the copy command will not take effect. In order to ensure the uniqueness of the element id here, I use the id of the data sent from the background, which can also be customized. It is also feasible to generate a uuid with js.