Как клонировать и добавить пустой элемент

Question

Я хотел бы добавить пустые html строки.

Мой желаемый результат - добавить html строки и удалить их содержимое (добавленной строки).

, чтобы достичь этого, я применить .html('') метод.

Но это не сработало.

Моя работа похожа на приведенную ниже.

Как добавить строки и удалить их (добавленные строки) содержание?

Спасибо

$(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);
});

Если вы хотите добавить клонированный элемент в конец таблицы, вы можете сделать:

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