JQuery не может клонировать () и appendTo() с HTML до

Question

Люди здесь, потому что у меня есть этот код, который на самом деле не работает, он в основном дублирует строку и создает новую строку для новой записи. Использую clone() а также appendTo(),

JSFIDDLE

Но если вы удалите последнюю часть html, она будет работать, похоже, что если есть новый тег, он имеет синтаксис, пожалуйста, кто-нибудь может мне помочь с этой проблемой?.

<table>
    <tr>
        <td>Hello world!</td>
   </tr>
</table>

Спасибо!

Answer 1

В твоей скрипке мало вопросов

1: элемент строки, выбранный для клонирования, неверен.

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

Вы можете использовать приведенный ниже модифицированный код для клонирования и добавления строки.

 $("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");
    var parent = $("#data");
    var tr = $("#data tr:last");
    console.log(tr);
    var e = tr.clone().appendTo(parent);
    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });
  });

обновленная скрипка: https://jsfiddle.net/363m6dsy/6/

Answer 2

Измените селектор и используйте .after() добавить

var tr = $("#parent:last");

    var e = $("#parent").clone();
    $(tr).after(e);

ПОЛНЫЙ JS

$(document).ready(function() {
  var i = 1;
  $("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");
    var tr = $("#parent:last");

    var e = $("#parent").clone();
    $(tr).after(e);
    console.log(e);
    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });
  });
  $("#remove").click(function() {
    var tr = $("#parent:last-child");
    if (i > 1) {
      i--;
      tr.remove();
    }
    if (i == 1) {
      $("#remove").attr("disabled", "true");
    }
  });
});

JSFIDDLE

Answer 3

Рабочая скрипка.

Просто клоновый ряд $("#parent").clone() тогда добавь это $('#data').append(e); лайк:

$("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");

    var e = $("#parent").clone();

    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });

    $('#data').append(e);
});

Надеюсь это поможет.

$(document).ready(function() {
  var i = 1;
  $("#clone").click(function() {
    i++;
    $("#remove").removeAttr("disabled");

    var e = $("#parent").clone();

    $(e).find("[type=text],[type=hidden]").each(function() {
      $(this).val('');
    });

    $('#data').append(e);
  });
  $("#remove").click(function() {
    var tr = $("#parent:last-child");
    if (i > 1) {
      i--;
      tr.remove();
    }
    if (i == 1) {
      $("#remove").attr("disabled", "true");
    }
  });
});

body {
  width: 700px;
}

table {
  width: 100%;
}

input[type="text"] {
  width: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data" name="data">
  <tr>
    <td colspan="9">
      <input type="button" value="Add" name="clone" id="clone">
      <input type="button" value="Remove" name="remove" id="remove">
    </td>
  </tr>
  <tr align="center">
    <td rowspan="2">N°</td>
    <td rowspan="2">Activity</td>
    <td rowspan="2">Field1</td>
    <td rowspan="2">Resources</td>
    <td colspan="2">Dates</td>
    <td rowspan="2">Field2</td>
    <td rowspan="2">Date 1</td>
    <td rowspan="2">Status</td>
  </tr>
  <tr align="center">
    <td>Start Date</td>
    <td>End Date</td>
  </tr>
  <tr name="parent" id="parent">
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="1" required>
      <input id="val[]" name="val[]" type="hidden" value="13256">
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="2" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="3" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="4" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="5" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="6" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="7" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="8" required>
    </td>
    <td align="center">
      <input id="val[]" name="val[]" type="text" value="9" required>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>Hello world!</td>
  </tr>
</table>