Question

我想问一下如何添加按钮以使用 Jquery 在表中添加新行，如果添加了新行，则第一行更改为删除按钮。并且用户可以删除每行。

我想做一个有每日报告的报告。

我想做的是每日报告有一个添加和删除按钮。稍后将使用 DomPDF 将其保存为 PDF 格式的报告。

<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>

表格形式：

Answer 1

为所有删除按钮添加一个通用类'delete-row-btn'

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

还为所有加号按钮添加一个公共类'add-row-btn'

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

需要在“append”函数内输入行的Html内容

如何使用 Jquery 添加/删除按钮？

1 个答案: