如何克隆和 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>