Как продублировать конкретную строку в таблице (JS / JQuery)?

Question

Я пытаюсь продублировать конкретную строку в моей таблице, когда нажимаю на кнопку «Duppliquer»

См. Мой код для создания таблицы ниже

<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
    <tr>
        <th style="width: 5%">Col 1</th>
        <th style="width: 5%">Col 2</th>
        <th style="width: 5%">Col 3</th>
        <th style="width: 5%">Col 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="center">Test1</td>
        <td align="center">Test2</td>
        <td align="center">Test3</td>
        <td align="center">
            <a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
        </td>
    </tr>
    <tr>
        <td align="center">Test4</td>
        <td align="center">Test5</td>
        <td align="center">Test6</td>
        <td align="center">
            <a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
        </td>
    </tr>
</tbody>

Я знаю, что должен использовать Javascript ou Jquery, но я не понимаю, как получить строку, которую я хочу дублировать

Я провел много исследований по этому вопросу, но не могу найти никакого ответа...

Answer 1

//I also recommend using lowercase ids and classes.
$(document).ready(function(){
$(document).on('click', '.Duppliquer', function(e){
e.preventDefault();
var row = $(e.target).closest('tr'),
copy = row.clone();
copy.insertAfter(row);
});
});

Answer 2

Используйте JQuery find:

  $('#myTable').find('tr').click(function () {
     var indx = $(this).index() +1; --gets row index
     var tr = $(this); --gets row

  });

Answer 3

Вы должны получить текущий элемент row, а затем использовать функцию clone(true), чтобы клонировать его и, наконец, добавить клонированную строку в таблицу, чтобы она помещалась после текущего элемента row.Вот пример:

$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
$rw.after($new_rw);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
    <tr>
        <th style="width: 5%">Col 1</th>
        <th style="width: 5%">Col 2</th>
        <th style="width: 5%">Col 3</th>
        <th style="width: 5%">Col 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="center">Test1</td>
        <td align="center">Test2</td>
        <td align="center">Test3</td>
        <td align="center">
            <a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
        </td>
    </tr>
    <tr>
        <td align="center">Test4</td>
        <td align="center">Test5</td>
        <td align="center">Test6</td>
        <td align="center">
            <a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
        </td>
    </tr>
</tbody>

РЕДАКТИРОВАТЬ: в соответствии с комментариями следующий код также изменит первую ячейку скопированной строки:

$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
var $first_cell = $new_rw.find("td:first");
$first_cell.html($first_cell.html() + " Copy!");
$rw.after($new_rw);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
    <tr>
        <th style="width: 5%">Col 1</th>
        <th style="width: 5%">Col 2</th>
        <th style="width: 5%">Col 3</th>
        <th style="width: 5%">Col 4</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td align="center">Test1</td>
        <td align="center">Test2</td>
        <td align="center">Test3</td>
        <td align="center">
            <a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
        </td>
    </tr>
    <tr>
        <td align="center">Test4</td>
        <td align="center">Test5</td>
        <td align="center">Test6</td>
        <td align="center">
            <a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
        </td>
    </tr>
</tbody>