JavaScript CopyToClipboard与onclick按钮位于同一行

时间:2018-10-09 00:57:28

标签: javascript ruby-on-rails ruby

我有以下脚本,该脚本从表中复制了单元格数据(该单元格是隐藏的-JS抓取数据,必须暂时显示它);它的效果很好,但仅适用于“ 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';
})

1 个答案:

答案 0 :(得分:0)

我所做的是使用rails将ID添加到onclick

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';
}

请客:)