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)函数对其进行克隆，最后将克隆的行附加到表中，以便将其放置在当前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>

Answer 2

//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 3

使用JQuery查找：

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

  });

如何复制表中的特定行（JS / JQuery）？

3 个答案: