JavaScript CopyToClipboard в той же строке, что и кнопка onclick

Question

У меня есть следующий скрипт, который копирует данные ячейки из таблицы (эта ячейка скрыта - JS захватывает данные, шоу должно мгновенно показывать их);он отлично работает, но только для идентификатора "bbcode2", а "onclick =" CopyToClipboard2 "в любой строке влияет только на самую первую запись записи идентификатора" bbcode2 "

Я понятия не имею, как заставить JSзахватить ту же ячейку в той же строке, что и кнопка onclick.Я попытался добавить .closest (# bbcode2), но он все еще только захватывает первый экземпляр bbcode2

Я могу заменить 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';
}

Редактировать -

Я добавил идентификатор переменной для каждой записи, и теперь у меня есть следующее, но для этого требуется, чтобы я щелкнул по ячейке для неена работу. Я хочу, чтобы это происходило с помощью кнопки в той же строке таблицы

Идеи?

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

Я использовал рельсы для добавления идентификатора в onclick

CopyToClipboard2(<%=f.id %>)

Затем используйте это, чтобы сообщить JS, какой идентификатор целевого объекта

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

Работает угощение :) 1009 *