JavaScript CopyToClipboard 与 onclick 按钮在同一行

Question

我有以下脚本，它从表格中复制一个单元格数据(该单元格是隐藏的 - JS 获取数据，show 必须暂时显示它)；它工作得很好，但只对“bbcode2”ID 和任何行上的“onclick="CopyToClipboard2”仅影响第一行“bbcode2”ID 记录

我不知道如何让 JS 抓取与 onclick 按钮位于同一行的同一单元格。我尝试添加 .closest(#bbcode2)，但仍然只获取 bbcode2 的第一个实例

如果需要，我可以用动态 ID 替换 bbcode2

<script type="text/javascript">
function CopyToClipboard2() {
    document.getElementById("bbcode2").style.display = 'block';
    document.getElementById("bbcode2").focus();
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById("bbcode2"));
        range.select().createTextRange();
        document.execCommand("Copy");
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(document.getElementById("bbcode2"));
        window.getSelection().addRange(range);
        document.execCommand("Copy");
    }
    document.getElementById("bbcode2").style.display = 'none';
}

编辑-

我为每条记录添加了一个变量 ID，现在我有以下内容，但它需要我单击单元格才能工作。我希望它通过表中同一行上的按钮发生

想法？

addEventListener('click', function (ev) {
    var serviceID = ev.target.id;
    alert(serviceID);
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(serviceID));
        range.select().createTextRange();
        document.execCommand("Copy");
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(document.getElementById(serviceID));
        window.getSelection().addRange(range);
        document.execCommand("Copy");
    }
    document.getElementById(serviceID).style.display = 'none';
})

Answer 1

我所做的是使用 rails 为 onclick 添加一个 ID

CopyToClipboard2(<%=f.id %>)

然后用它来告诉 JS 要定位的 ID

<script type="text/javascript">
function CopyToClipboard2(clicked_id) {
    document.getElementById(clicked_id).style.display = 'block';
    document.getElementById(clicked_id).focus();
    if (document.selection) {
        var range = document.body.createTextRange();
        range.moveToElementText(document.getElementById(clicked_id));
        range.select().createTextRange();
        document.execCommand("Copy");
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
        var range = document.createRange();
        range.selectNode(document.getElementById(clicked_id));
        window.getSelection().addRange(range);
        document.execCommand("Copy");
    }
    document.getElementById(clicked_id).style.display = 'none';
}

请客:)