Добавить кнопки и функцию обратного вызова для копирования информации из <tr>...</ tr>
У меня есть следующий 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.
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>