Добавить кнопки и функцию обратного вызова для копирования информации из <tr>...</ tr>

Question

У меня есть следующий HTML-отчет, сгенерированный программным обеспечением (Navisworks):

<tr class="contentRow">
 <td colspan="2" class="contentCell">
  <a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
   <img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
  </a>
  <!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
 </td>
 <td colspan="2" class="contentCell">Clash1</td>
 <!-- more td !-->
 <td class="item1Content">
  <i>Element ID</i>:
  509894
 </td>
 <!-- more contet as td !-->
 <td class="item2Content"><i>Element ID</i>:
  576096
 </td>
 <!-- more contet as td !-->
</tr>

<tr class="contentRow">
 <td colspan="2" class="contentCell">
  <a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
   <img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
  </a>
  <!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
 </td>
 <td colspan="2" class="contentCell">Clash2</td>
 <!-- more td !-->
 <td class="item1Content">
  <i>Element ID</i>:
  509894
 </td>
 <!-- more contet as td !-->
 <td class="item2Content"><i>Element ID</i>:
  576096
 </td>
 <!-- more contet as td !-->
</tr>

Я хотел бы сделать следующее:

• добавить кнопку после каждого <a></a> тег

• добавить функцию, которая будет собирать идентификатор

  <td class="item1Content">
      <i>Element ID</i>:
      509894
  </td>
  

  и идентификатор

  <td class="item2Content"><i>Element ID</i>:
      576096
  </td>
  

• и копирует его в буфер обмена

Может ли кто-нибудь дать мне отправную точку, где искать? Я довольно новичок в JQuery.

Answer 1

Попробуйте следующий код:

var rows = $('#testTable > tbody > tr');
$.each(rows, function(index, value){
    $(`<input type="button" value="Get Info"/ onclick="getInfo(this)">`).appendTo($(this).find('td:first-child'))
});

function getInfo(that){
    var id1 = $(that).parent().parent().find('.item1Content')[0].innerText;
    var id2 = $(that).parent().parent().find('.item2Content')[0].innerText;
    console.log(id1);
    console.log(id2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="testTable">
    <tr class="contentRow">
        <td colspan="2" class="contentCell">
            <a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
                <img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
            </a>
            <!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
        </td>
        <td colspan="2" class="contentCell">Clash1</td>
        <!-- more td !-->
        <td class="item1Content">
        <i>Element ID</i>:
            509894-1
        </td>
        <!-- more contet as td !-->
        <td class="item2Content"><i>Element ID</i>:
            576096-2
        </td>
        <!-- more contet as td !-->
    </tr>

    <tr class="contentRow">
        <td colspan="2" class="contentCell">
            <a target="_blank" href="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg ">
                <img border="0" width="95" height="95" src="100+200_WS-U2-U1_default-Hard_files\cd000001.jpg">
            </a>
            <!-- HERE I WOULD LIKE TO INSERT A BUTTON -->
        </td>
        <td colspan="2" class="contentCell">Clash2</td>
        <!-- more td !-->
        <td class="item1Content">
        <i>Element ID</i>:
            509894-3
        </td>
        <!-- more contet as td !-->
        <td class="item2Content"><i>Element ID</i>:
            576096-4
        </td>
        <!-- more contet as td !-->
    </tr>
</table>