To jest kod mojego stołu, już oznaczałem tr Chciałem ustawić w kodzie

Po wstawieniu nowych danych w tabeli za pomocą modalnego wyskakującego formularza, nowy wiersz zawsze pokaże się w ostatni wiersz. Chcę zrobić TR, który chciałem naprawić w ostatnim rzędzie.

<table class="table table-hover" id="table1">

<thead>
    <th></th>

    <th>Receipt No.</th>

    <th>Amount</th>

    <th>Item</th>

    <th>Label</th>

    <th>Remark</th>

    <th>Start Date</th>

    <th>Due Date</th>
</thead>

<tbody id="gyFee">
    @forelse ($gylight as $item)
    @if($item->sx_ID == $light->sx_ID )
    <tr>
      <td></td>
      <td>{{ $item->gylight_receipt }}</td>
      <td>{{ $item->gylight_amount }}</td>
      <td>{{ $item->gylight_number }}</td>
      <td>{{ $item->gylight_label }}</td>
      <td>{{ $item->gylight_remark }}</td>
      <td>{{ $item->gylight_sDate }}</td>
      <td>{{ $item->gylight_eDate }}</td>
    </tr>
    
    @endif

    @empty
    <tr>
        <td><button class="btn btn-primary" data-toggle="modal" data-target="#guanyinModal">Add</button></td>
        <td style="text-align:center;vertical-align:middle" colspan="7">No Infromation</td>

    </tr>
    
    @endforelse
    
    {{--This is the one tr i want to set on the last row for this table --}}
    <tr>
      <td><button class="btn btn-primary" data-toggle="modal" data-target="#guanyinModal">Add</button></td>
    </tr>

</tbody>

To mój skrypt do Ajax opublikuj dane i dołącz go do mojej tabeli

$('#guanyinAdd').click(function(e){
e.preventDefault();

var id = $('#sx_ID').val();
var receipt = $('#gylight_receipt').val();
var amount = $('#gylight_amount').val();
var number = $('#gylight_number').val();
var label = $('#gylight_label').val();
var remark = $('#gylight_remark').val();
var sDate = $('#gylight_sDate').val();
var eDate = $('#gylight_eDate').val();

    $.ajax({
        url: "<?= route('admin.guanyin.add.api') ?>",
        method: 'post',
        data:{
            _token: "{{ csrf_token() }}",
            sx_ID: id,
            gylight_receipt: receipt,
            gylight_amount: amount,
            gylight_number: number,
            gylight_label: label,
            gylight_remark: remark,
            gylight_sDate: sDate,
            gylight_eDate: eDate
        },
        success: function(data){
            console.log(data);
            var guanyin = data.guanyin;
            
            $('#gyFee').append('<tr>'+
                                '<td></td>'+
                                '<td>'+ guanyin.gylight_receipt +'</td>'+
                                '<td>'+ guanyin.gylight_amount +'</td>'+
                                '<td>'+ guanyin.gylight_number +'</td>'+
                                '<td>'+ guanyin.gylight_label +'</td>'+
                                '<td>'+ guanyin.gylight_remark +'</td>'+
                                '<td>'+ guanyin.gylight_sDate +'</td>'+
                                '<td>'+ guanyin.gylight_eDate +'</td>'+
                                '</tr>');

            $('#guanyinModal').modal('hide');
            $('#guanyinForm').trigger('reset');
        }
    });
        

});

0
Jeremy Yx 27 październik 2020, 07:53

1 odpowiedź

Najlepsza odpowiedź

Możesz zachować bieżący kod i po prostu utwórz <tfoot> - Stopka Tabeli, i umieść stałe wiersze w stopce stołowej. Wszystkie inne wiersze można teraz dołączyć do ciała tabel

1
lyyka 27 październik 2020, 10:56