Copy row from a table with jquery

Question

Copy row from a table with jquery

Navigation

#1 by (0 votes)

1

I'm trying to copy a row of a table with jquery, this is the table:

<table id="myTable" class="table table-bordered">
    <thead>
        <tr>
            <td>Empleado</td>
            <td>Fecha salida</td>
            <td>Fecha regreso</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            <select class="selectpicker" name="employee">';
                buildemployees();
    echo '</select>
            </td>
                <td><input type="text" class="form-control datepicker" name="dateI"></td>
            <td><input type="text" class="form-control datepicker" name="dateO"></td>
        </tr>
  </tbody>

The problem is with the dropdown that is built based on a php function buildemployees (), since I tried to add a new one or cope it but it does not work for me, this is the jquery code I use right now:

var tbody = $(\'#myTable\').children(\'tbody\');
            var table = tbody.length ? tbody : $(\'#myTable\');
            $(\'.addPlus\').click(function(){
                $("#myTable tbody td").clone().appendTo("#myTable tbody");
            })

            $(\'.addMinus\').click(function(){
                $(\'#myTable\').each(function(){
                    $(\'#myTable\').find(\'tbody tr\').last().remove();
                });
            })

javascript jquery php

asked by Fernando Garcia 06.06.2018 в 23:22

source

1 answer

HTML form to search and edit data in Google Sheets Focus an item when iterating over the

score 0 · Accepted Answer

The fact that the dropdown is built dynamically should not affect at all. I think you just have the selector wrong, it should be tr and not td. Here is an example:

var tbody = $('#myTable').children('tbody');
            var table = tbody.length ? tbody : $('#myTable');
            $('.addPlus').click(function(){
                $("#myTable tbody tr").last().clone().appendTo("#myTable tbody");
            })

            $('.addMinus').click(function(){
                $('#myTable').each(function(){
                    $('#myTable').find('tbody tr').last().remove();
                });
            })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-bordered">
    <thead>
        <tr>
            <td>Empleado</td>
            <td>Fecha salida</td>
            <td>Fecha regreso</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            <select class="selectpicker" name="employee">';
                <option value="1">Empleado 1</option>
                <option valu ="2">Empleado 2</option>
            </select>
            </td>
                <td><input type="text" class="form-control datepicker" name="dateI"></td>
            <td><input type="text" class="form-control datepicker" name="dateO"></td>
        </tr>
  </tbody>
  <button class=addPlus>Clonar</button>