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

in this case, only thead should be cloned

And jquery applied to the cloned table, which will also have to be cloned, and it is necessary that each jquery code work separately for "its" table.

That where to insert an element

Insert

  • And now try to explain what you need, humanly. Without "so to speak." - Igor
  • Wait a second, I will try to explain - Australia

1 answer 1

thead insertion thead not make sense without a table . Maybe so?

 $('.btn-primary').click(function(){ var newTable = $("<table></table>"); newTable.append($('table > thead').eq(0).clone(true)); $('main > div.container > div.row').after(newTable); });
  • It did not happen that way. - Australia
  • I figured out how to insert thead, but now all the classes have disappeared from the added element, have any ideas how to fix it? - Australia
  • @Australia "how to insert thead I figured out, ... all the classes have disappeared" - this should not be. Show me how you do it. - Igor
  • $('.btn-primary').click(function(){ var newTable = $('table > thead').clone(true); $('.after > .row > .col-lg-12').before(newTable); }); - Australia
  • The screen of what happened in the description, immediately below the first screen. - Australia