1
      <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 код работал по отдельности для "своей" таблицы.

То куда вставлять элемент

Вставка

2
  • А теперь попробуйте объяснить, что Вам нужно, по-человечески. Без "так сказать".
    – user176262
    10 апр 2019 в 16:27
  • Секундочку,постараюсь объяснить
    – itsa
    10 апр 2019 в 16:30

1 ответ 1

0

Вставка 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);
});
7
  • ,неа так не получилось.
    – itsa
    10 апр 2019 в 16:50
  • как вставить thead я разобрался ,только вот все class-ы исчезли у добавленного элемента,есть идеи как исправить ?
    – itsa
    10 апр 2019 в 17:00
  • @Australia "как вставить thead я разобрался, ... все class-ы исчезли" - этого быть не должно. Покажите, как Вы это делаете.
    – user176262
    10 апр 2019 в 17:05
  • $('.btn-primary').click(function(){ var newTable = $('table > thead').clone(true); $('.after > .row > .col-lg-12').before(newTable); });
    – itsa
    10 апр 2019 в 17:07
  • Скрин того что получилось в описании,сразу под первым скрином.
    – itsa
    10 апр 2019 в 17:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.