как клонировать table и вставить ее после определенного тега

144

20 января 2020, 15:40

      <div class="container d-flex justify-content-center">
        <div class="row">
          <div class="col-lg-12">
          <table class="table table-borderless">
            <thead>
            <tr class="d-flex bordr">
              <th>
                    <img src="images/notebook.png" alt="notebook">
              </th>
              <th class="text-capitalize table__thead__text">
                  for home
              </th>
            </tr>
                <tr class="d-flex addPole">
                  <td>
                      <img src="images/plus.png" alt="plus">
                  </td>
                  <td>
                      <div class="input-group">
                        <input type="text" class="form-plaintext" 
                        placeholder="Start typing here to create a task.." >
                          <div class="input-group-append">
                            <button class="btn btn-success" type="submit">
                              Add Task
                            </button>
                          </div>
                      </div>
                  </td>
                </tr>
                </thead>
                <tbody>
                <tr class="d-flex">
                  <td>
                      <div class="form-check">
                        <label for="" class="form-check-label">
                          <input type="checkbox" class="form-check-input">
                        </label>
                      </div>
                  </td>
                  <td class="table__task__text">
                    <span class="notebookLine1 "></span>
                    <span class="notebookLine2 "></span>
                    <span class="tdLine"></span>
                      <span class="textchanger">Buy a milk</span>
                  </td>
                  <td class="ml-auto">
                      <img src="images/movearrow.png
                      " alt="movearrow" class="move">
                      <span class="utilites__lines1"></span>
                      <img src="images/pencil.png" alt="chengetext"  class="pencil">
                      <span class="utilites__lines2"></span>
                      <img src="images/trashbox.png" alt="deletetask" class="deleteTask">
                  </td>
                </tr>
                <tr class="d-flex">
                  <td>
                      <div class="form-check">
                        <label for="" class="form-check-label">
                          <input type="checkbox" class="form-check-input">
                        </label>
                      </div>
                  </td>
                  <td class="table__task__text">
                    <span class="notebookLine1 "></span>
                    <span class="notebookLine2 "></span>
                    <span class="tdLine"></span>
                      <span class="textchanger">Call Mam<span>
                  </td>
                  <td class="ml-auto" >
                      <img src="images/movearrow.png
                      " alt="movearrow" class="move">
                      <span class="utilites__lines1"></span>
                      <img src="images/pencil.png" alt="chengetext" 
                       class="pencil">
                      <span class="utilites__lines2"></span>
                      <img src="images/trashbox.png" alt="deletetask" class="deleteTask">
                  </td>
                </tr>

                <tr class="d-flex">
                  <td>
                      <div class="form-check">
                        <label for="" class="form-check-label">
                          <input type="checkbox" class="form-check-input">
                        </label>
                      </div>
                  </td>
                  <td class="table__task__text">
                    <span class="notebookLine1 "></span>
                    <span class="notebookLine2 "></span>
                    <span class="tdLine"></span>
                      <span class="textchanger">Clean the room<span> 
                  </td>
                  <td class=" ml-auto">
                      <img src="images/movearrow.png
                      " alt="movearrow " class="move">
                      <span class="utilites__lines1"></span>
                      <img src="images/pencil.png" alt="chengetext"  class="pencil">
                      <span class="utilites__lines2"></span>
                      <img src="images/trashbox.png" alt="deletetask" class="deleteTask">
                  </td>
                </tr>
                <tr class="d-flex">
                  <td>
                      <div class="form-check">
                        <label for="" class="form-check-label">
                          <input type="checkbox" class="form-check-input">
                        </label>
                      </div>
                  </td>
                  <td class="table__task__text">
                    <span class="notebookLine1 "></span>
                    <span class="notebookLine2 "></span>
                    <span class="tdLine"></span>
                      <span class="textchanger">Repair the DVD Player<span>
                  </td>
                  <td class="ml-auto">
                      <img src="images/movearrow.png
                      " alt="movearrow" class="move">
                      <span class="utilites__lines1"></span>
                      <img src="images/pencil.png" alt="chengetext"  class="pencil">
                      <span class="utilites__lines2"></span>
                      <img src="images/trashbox.png" alt="deletetask" class="deleteTask">
                  </td>
                </tr>
            </tbody>
          </table>
        </div>
        </div>
      </div>

$(document).ready(function(){

    $('.btn-primary').click(function(){
        var newTable = $('table > thead').clone(true);
        $('main > div.container > div.row').after(newTable);

    });
});

в данном случае надо клонировать только thead

А к клонированной таблице применен jquery,который будет тоже должен быть клонирован,и нужно что бы каждый jquery код работал по отдельности для "своей" таблицы.

Answer 1

Вставка thead не имеет смысла без table. Может быть, вот так?

$('.btn-primary').click(function(){
    var newTable = $("<table></table>");
    newTable.append($('table > thead').eq(0).clone(true));
    $('main > div.container > div.row').after(newTable);
});