Блог

Я делаю таблицу crud (СОЗДАНИЕ, ЧТЕНИЕ, ОБНОВЛЕНИЕ, УДАЛЕНИЕ) в PHP JS SQL, и я хочу сделать следующее:

У меня есть таблица с пользователями (я беру эти данные из своей базы данных):

Когда я нажимаю на значок «Редактировать» (зеленый значок редактирования), я могу ввести значения в своей таблице.

Я не знаю, как получить точное положение массива (чтобы показать всем этим пользователям, я использую массив, ofc), чтобы сохранить его в переменной для последующего выполнения запроса для обновления информации.

Вы понимаете, что я пытаюсь сказать, ребята?

Вот мой код:

 <table class='table table-bordered table-hover' class='display' style='width:100%; text-align: center;' id='tableTest'>
        <thead>
            <tr>
                <th>Editar</th>
                <th>Nombre</th>
                <th>Apellido 1</th>
                <th>Apellido 2</th>
                <th>Email</th>
                <th>Eliminar</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($res_table as $r){ ?>
                <tr>
                    <td><span class="fas fa-edit editar grow" onclick="updateData(this)"></span></td>
                    <td><?php echo $r->usuario?></td>
                    <td><?php echo $r->apellido1?></td>
                    <td><?php echo $r->apellido2?></td>
                    <td><?php echo $r->email?></td>
                    <td><span class="fas fa-trash-alt grow" onclick="updateData(this)"></span></td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

<div id="contenedorForm">

</div>
 

А вот и мой JS.

     // Función para actualizar los datos de la tabla.
    function updateData(nodo){          
        var nodoTd = nodo.parentNode; //Nodo TD
        var nodoTr = nodoTd.parentNode; //Nodo TR
        var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
        var nodosEnTr = nodoTr.getElementsByTagName('td');
        var editData = nodosEnTr[0].textContent;
        var usuario = nodosEnTr[1].textContent;
        var apellido1 = nodosEnTr[2].textContent;
        var apellido2 = nodosEnTr[3].textContent;
        var email = nodosEnTr[4].textContent;
        var opciones = nodosEnTr[5].textContent;
        
        var nuevoCodigoHtml =
            '<td><span class="fas fa-edit editar grow" onclick="updateData(this)"></span></td>' 
            '<td><input onblur="getIdInputFromDatabase()" type="text" name="usuario" id="usuario" value="'   usuario   '" size="20"></td>' 
            '<td><input onblur="getIdInputFromDatabase()" type="text" name="apellido1" id="apellido1" value="'   apellido1   '" size="20"></td>' 
            '<td><input onblur="getIdInputFromDatabase()" type="text" name="apellido2" id="apellido2" value="'   apellido2   '" size="20"></td>' 
            '<td><input onblur="getIdInputFromDatabase()" type="text" name="email" id="email" value="'   email   '" size="20"></td>'   
            '<td><span class="fas fa-trash-alt editar grow" onclick="updateData(this)"></span></td>';
        
        nodoTr.innerHTML = nuevoCodigoHtml;

        nodoContenedorForm.innerHTML =
            'Pulse Aceptar para guardar los cambios o cancelar para cancelActionlos'  
            '<form name = "formulario" action="general" method="get" onsubmit="capturarEnvio()" onreset="cancelAction()">'  
            '<input class="boton" type = "submit" value="Aceptar">'  
            '<input class="boton" type="reset" value="Cancelar">';
    }

    function getIdInputFromDatabase(){
        alert("I NEED TO KNOW THE POSITION OF THE ARRAY WHERE I DID ON BLUR");
    }

// Data tables.
        $(function () {
            $('#tableTest').DataTable({
                "language": {"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json"},  
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true,
                "info": false,
                "autoWidth": false,
                "scrollX": false
            });
        });
</script> 
 

Как я могу это сделать, ребята? Вы не могли бы мне помочь? Я искал в API таблиц данных, но я заблудился.
Заранее благодарю вас!

Хорошего вам дня!

Поскольку у вас есть поле с именем ID , вы можете сохранить его в HTML при первом построении таблицы (в <?php foreach ($res_table as $r){ ?> цикле), это может быть либо как атрибут tr , например

 <tr data-id='<?php echo $r->id?>'>
 

или в скрытом td, например

 <td style='display:none;'><?php echo $r->id?></td>
 

(не используйте style=’display:нет’ используйте css, чтобы скрыть его, просто пример здесь, чтобы показать, что он скрыт).

Тогда ваше редактирование может узнать, какая строка редактируется по ее идентификатору (а не по индексу строки, который может не совпадать с базой ID данных).

 var id = $(nodoTr).data("id")
 

или

 var id = nodoTr[0].textContent;
 

Затем вам нужно передать это id в встроенное редактирование, каким-то образом, это может быть путем добавления в качестве параметра в onsubmit, например:

 '... onsubmit="capturarEnvio('   id   ')" ...'