追加按鈕和回調funcktion從<tr>複製信息...</tr>

Question

我已經通過軟件（Navisworks中）生成以下HTML報告：

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

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

我想這樣做的如下：

• 在每個後面加一個按鈕<a></a>標籤

• 追加，將收集的

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

  ID和的

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

• ，並將其複製到剪貼板中的ID的功能

可能有人給我一個起點在哪裏看？我對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>