Блог

Я должен создать функциональность, с помощью которой пользователи могут добавлять и удалять строки с полями ввода. Проблема в том, что мне нужен индекс строки (номер) перед каждой строкой в неправильном порядке(1., 2., 3. и т.д.) Также, Когда одна или несколько строк удаляются, а затем добавляются снова. Я могу добавлять строки, но я не могу правильно подсчитать, потому что если я их удалю, то подсчет начнется с 4, но мне нужен 1, или если вторая строка будет удалена, мне понадобится 2 вместо 4.

Я сделал это с помощью append() и до сих пор так хорошо, но мне также нужно продолжить строку перед каждой строкой. У меня есть счетчик, но, скажем, я добавляю 1 строку, и она дает числа 1 и 2. Если я удалю вторую строку и снова добавлю другую, теперь количество будет 1 и 3

Обратите внимание, что кнопка «добавить» только одна и отделена от кнопки добавить ().;

У меня есть три строки 1, 2 и 3 соответственно

Теперь я удалю один из них. Например, я удаляю строку номер 2. Я вижу эту демонстрацию,

Этого не должно произойти. На нем должны отображаться цифры 1 и 2 соответственно.

 <script>
    $(document).ready(function() {
        $('#educationalForm').submit(function(event){
            event.preventDefault();
            var formData = new FormData($('#educationalForm')[0]);
            $.ajax({
                url:'{{ route('educational.store') }}',
                method: 'POST',
                data: formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data){
                    const variables = ['grade', 'major', 'end'];
                    variables.forEach(variable => {
                        if(data[variable] === null) data[variable] = '';
                    });
                    const newRowNum = $('#educationalForm tr').length   2;
                    let html = ''  
                        '<tr>' 
                        '<td class="fw-normal" id="demo">'  (newRowNum)  '</td>' 
                        '<td class="fw-normal">' data.grade '</td>' 
                        '<td class="fw-normal">' data.major '</td>' 
                        '<td class="fw-normal">' data.end '</td>' 
                        '<td>' 
                        '<form method="post" id="educational-destroy">' 
                        '@csrf' 
                        '@method('DELETE')' 
                        '<div class="btn-group">' 
                        '<a data-id="' data.id '" class="btn btn-info btn-sm" id="educationalEdit" data-bs-toggle="modal" data-bs-target="#educationalModal">ویرایش</a>' 
                        '<button data-id="' data.id '" type="button" class="btn btn-danger btn-sm" id="educationalDestroy">حذف</button>' 
                        '</div>' 
                        '</form>' 
                        '</td>' 
                        '</tr>';
                    $('#educationalTable').append(html);
                    $('#educationalForm').trigger('reset');
                },
            });
        });

        showEducationals();

        function showEducationals() {
            $.get('{{ route('educational.index') }}', function (data) {
                $('#educationalTable').html("");
                $.each(data, function (key, val) {
                    const variables = ['grade', 'major', 'end'];
                    variables.forEach(variable => {
                        if(val[variable] === null) val[variable] = '';
                    });
                    $('#educationalTable').append('<tr>' 
                        '<td class="fw-normal">'  (key 1)  '</td>' 
                        '<td class="fw-normal">' val.grade '</td>' 
                        '<td class="fw-normal">' val.major '</td>' 
                        '<td class="fw-normal">' val.end '</td>' 
                        '<td>' 
                        '<form method="post" id="educational-destroy">' 
                        '@csrf' 
                        '@method('DELETE')' 
                        '<div class="btn-group">' 
                        '<a data-id="' val.id '" class="btn btn-info btn-sm" id="educationalEdit" data-bs-toggle="modal" data-bs-target="#educationalModal">ویرایش</a>' 
                        '<button data-id="' val.id '" type="button" class="btn btn-danger btn-sm" id="educationalDestroy">حذف</button>' 
                        '</div>' 
                        '</form>' 
                        '</td>' 
                        '</tr>'
                    );
                });
            });
        }

        $(document).on('click', '#educationalEdit', function(event) {
            event.preventDefault();
            var id = $(this).data('id');
            $.ajax({
                type:'get',
                url:'/educational/' id '/edit',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success:function (data) {
                    console.log(data);
                    $('#id').val(data.educational.id);
                    $('#edit_grade').val(data.educational.grade);
                    $('#edit_major').val(data.educational.major);
                    $('#edit_avg').val(data.educational.avg);
                    $("input[name='edit_start']").val(data.educational.start);
                    $("input[name='edit_end']").val(data.educational.end);
                    $('#edit_docPlaceName').val(data.educational.docPlaceName);
                    $('#edit_thesisTitle').val(data.educational.thesisTitle);
                    $('#edit_docPlaceCountry').val(data.educational.docPlaceCountry);
                    $('#edit_docPlaceCity').val(data.educational.docPlaceCity);
                },
            });
        });

        $(document).on('click', '#educationalUpdate', function(event) {
            event.preventDefault();
            var id = $('#id').val();
            var file = $('#edit_upload_doc').prop('files')[0];
            var formData = new FormData($('#educationalFormUpdate')[0]);
            formData.append('file', file);
            $.ajax({
                type: 'POST',
                url: '/educational/' id,
                dataType: 'JSON',
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (response) {
                    console.log(response);
                    $('#educationalModal').modal('hide');
                    showEducationals();
                },
            });
        });

        $(document).on('click', '#educationalDestroy', function(event) {
            event.preventDefault();
            $.ajax({
                url:'educational/' $(this).data('id'),
                type: 'DELETE',
                dataType: 'json',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    $('#educationalsTable').html('');
                    showEducationals();
                },
                error: function(response) {
                    console.log(response);
                },
            });
        });
    });
</script>
 

Так что в целом я могу считать правильно до тех пор, пока элементы не будут удалены. Если у меня 3 строки, я получу количество 1. 2. 3. но если я удалю их все и снова добавлю 3 строки, я получу 4. 5. 6. НО мне нужно 1. 2. 3. снова

Вы должны сбрасывать счетчик каждый раз, когда вы повторно визуализируете всю таблицу.

Вы можете переместить count значение «кому» внутри своей функции рендеринга, но это не является строго необходимым, потому что функция jQuery each уже предоставляет индекс (вы его называете key ), который вы могли бы использовать вместо count .

Поэтому вы можете сделать:

 function showEducationals() {
    $.get('{{ route('educational.index') }}', function (data) {
        $('#educationalTable').html("");
        $.each(data, function (key, val) {
            const variables = ['grade', 'major', 'end'];
            variables.forEach(variable => {
                if(val[variable] === null) val[variable] = '';
            });
            $('#educationalTable').append('<tr>' 
                '<td class="fw-normal">'  (key 1)  '</td>'  // using key instead of count
 

Обратите внимание, что я также удалил id=demo . Это связано с тем, что вы создаете несколько ячеек с id=demo (in '<td class="fw-normal" id="demo">' count '</td>' ), и в идеале идентификаторы должны быть уникальными.

При добавлении новых строк используйте вместо i количества строк, фактически имеющихся в таблице:

 $('#educationalForm').submit(function(event){
    event.preventDefault();
    var formData = new FormData($('#educationalForm')[0]);
    $.ajax({
        url:'{{ route('educational.store') }}',
        method: 'POST',
        data: formData,
        cache:false,
        contentType: false,
        processData: false,
        success:function(data){
            const variables = ['grade', 'major', 'end'];
            variables.forEach(variable => {
                if(data[variable] === null) data[variable] = '';
            });
            const newRowNum = $('#educationalTable tr').length   1; // added this
            let html = ''  
                '<tr>' 
                '<td class="fw-normal">'  (newRowNum)  '</td>'  // edited this
 

Кроме того, вы должны удалить i count переменные и, так как они больше не нужны:

 showEducationals();
let i;                 // remove this
let count = 1;         // remove this
function showEducationals() {
    // ...
            );
            i = count  // remove this
        });