javascript - 如何复制表中的特定行(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 或 Jquery，但我不明白如何获取我想要复制的行

我对此主题进行了大量研究，但找不到任何答案......

Answer 1

您应该获取当前的 row 元素，然后使用 clone(true) 函数克隆它，最后将克隆的行附加到表中，以便将其放置在之后当前行元素。这是一个例子:

$(".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>