如何克隆和 append 空元素

Question

我想将 append 空 html 行。

我想要的结果是 append html 行并删除其（附加行的）内容。

为了实现它，我应用了.html('')方法。

但效果并不好。

我的工作如下。

如何 append 行并删除其（附加行）内容？

谢谢

 $(document).ready(function() { $("table").on( "click", "tr", function() { $("table").append($(this).clone().html(' ')); }); });

 table { border-collapse:collapse;} td { border:solid black 1px; transition-duration:0.5s; padding: 5px; cursor:pointer;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </tbody> </table>

Answer 1

为什么不简单地插入tr而不是克隆和删除它的 html？

$("table").on( "click", "tr", function() {
   $(this).after("<tr />");
});

如果你也想克隆td ，那么你可以这样做：

$("table").on( "click", "tr", function() {
   var row = $(this).clone().find('td').html('');
   $(this).after(row);
});

如果你想 append 在表的末尾克隆元素，那么你可以这样做：

$("table").on( "click", "tr", function() {
   var row = $(this).clone().find('td').html('');
   row.appendTo('table');
});

甚至：

$('table').append(row)

总结你做错了什么是清空克隆的元素而不是它的td html。

Answer 2

 $(document).ready(function() { var table=$("table"); table.on( "click", "tr", function() { var clonedTr=$(this).clone(); clonedTr.find("td").html(""); table.append(clonedTr); }); });

 table { border-collapse:collapse;} td { border:solid black 1px; transition-duration:0.5s; padding: 5px; cursor:pointer;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> </tbody> </table>

Answer 3

这有效：

 $( document ).ready(function() { $('#tableID').on( "click", "tr", function() { var elt = $(this).clone() elt.find('td').empty() $('#tableID').append(elt) }) });

 table td { border: 1px solid; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tableID"> <tbody> <tr> <td>0</td> <td>1</td> <td>2</td> </tr> </tbody> </table>