Блог

я хочу кое-что спросить, как добавить кнопку для добавления новой строки в таблицу, используя Jquery , и если добавлена новая строка, в первой строке изменена на кнопку удаления. и пользователь может удалять каждую строку.

Я хочу создать отчет, в котором есть ежедневный отчет.

я хочу сделать так, чтобы в ежедневном отчете была кнопка добавления и удаления. который позже будет сохранен в виде отчета в формате PDF с использованием DomPDF.

 <div class="card-body">
    <div class="table-responsive">
    @csrf
    <table class="table table-striped table-bordered dt-responsive" id="tb">
        <thead class="thead-dark ">
            <tr>
                <th class="align-middle text-center" style="width:23%">Date</th>
                <th class="align-middle text-center" style="width:10%">Start</th>
                <th class="align-middle text-center" style="width:10%">Finish</th>
                <th class="align-middle text-center" style="width:20%">Title</th>
                <th class="align-middle text-center" style="width:32%">Description</th>
                <th class="align-middle text-center" style="width:5%">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="align-middle text-center" ><input type="text" name="tb_tanggal" id="tb_tanggal" class="form-control input-lg datepicker" placeholder="25 Januari 2021"></td>
                <td class="align-middle text-center" ><input type="text" name="tb_mulai" id="tb_mulai" class="form-control input-lg timepicker" placeholder="08:00" ></td>
                <td class="align-middle text-center" ><input type="text" name="tb_selesai" id="tb_selesai" class="form-control input-lg timepicker" placeholder="17:00"></td>
                <td class="align-middle" ><input type="text" name="tb_judul" id="tb_judul" class="form-control input-lg" placeholder="Judul Laporan"></td>
                <td class="align-middle" ><textarea type="text" name="tb_desc" id="tb_desc" class="form-control" rows="3"  style="resize: none;"></textarea></td>
                <td class="align-middle text-center" ><a href="#" class="btn btn-danger cyan btn-block"> <i class="zmdi zmdi-window-minimize"></i></a></td>
            </tr>
            <tr>
                <td class="align-middle text-center" ><input type="text" name="tb_tanggal" id="tb_tanggal" class="form-control input-lg datepicker" placeholder="25 Januari 2021"></td>
                <td class="align-middle text-center" ><input type="text" name="tb_mulai" id="tb_mulai" class="form-control input-lg timepicker" placeholder="08:00" ></td>
                <td class="align-middle text-center" ><input type="text" name="tb_selesai" id="tb_selesai" class="form-control input-lg timepicker" placeholder="17:00"></td>
                <td class="align-middle" ><input type="text" name="tb_judul" id="tb_judul" class="form-control input-lg" placeholder="Judul Laporan"></td>
                <td class="align-middle" ><textarea type="text" name="tb_desc" id="tb_desc" class="form-control" rows="3"  style="resize: none;"></textarea></td>
                <td class="align-middle text-center" ><a href="#" class="btn btn-danger cyan btn-block"> <i class="zmdi zmdi-window-minimize"></i></a></td>
            </tr>
            <tr>
                <td class="align-middle text-center" ><input type="text" name="tb_tanggal" id="tb_tanggal" class="form-control input-lg datepicker" placeholder="25 Januari 2021"></td>
                <td class="align-middle text-center" ><input type="text" name="tb_mulai" id="tb_mulai" class="form-control input-lg timepicker" placeholder="08:00" ></td>
                <td class="align-middle text-center" ><input type="text" name="tb_selesai" id="tb_selesai" class="form-control input-lg timepicker" placeholder="17:00"></td>
                <td class="align-middle" ><input type="text" name="tb_judul" id="tb_judul" class="form-control input-lg" placeholder="Judul Laporan"></td>
                <td class="align-middle" ><textarea type="text" name="tb_desc" id="tb_desc" class="form-control" rows="3"  style="resize: none;"></textarea>{{ old('') }}</td>
                <td class="align-middle text-center" ><a href="#" class="btn btn-success cyan btn-block"> <i class="zmdi zmdi-plus"></i></a></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>
 

форма таблицы:

Добавьте общий класс ‘delete-row-btn’ ко всем кнопкам удаления

 // Delete row on delete button click
    $(document).on('click', '.delete-row-btn', function (e) {
        $(this).closest('tr').remove()
    });
 

также добавьте общий класс ‘add-row-btn’ ко всем кнопкам plus

 // add new row on plus button click and change this button to delete button
$(document).on('click', '.add-row-btn', function (e) {
    // add new row
    $('#tb').append('<tr><td>..</td><td>..</td><td>..</td><td>..</td></tr>');

    //change this plus btn to delete button
    $(this).closest('td').html('<a href="#" class="btn btn-danger cyan btn-block delete-row-btn"><i class="zmdi zmdi-window-minimize"></i></a>')
});
 

Html-содержимое строки необходимо ввести внутри функции «добавить»