如何获取数据表数组的确切位置？

Posted 2023-05-08

【中文标题】如何获取数据表数组的确切位置？

【英文标题】：How to get the exact position of the array of a datatable?

【发布时间】：2021-08-20 19:33:02

【问题描述】：

我在 php + JS + SQL 中做 crud (CREATE, READ, UPDATE, DELETE) 表，我想做下一个：

我有一张用户表（我从我的数据库中获取这些数据）：

当我点击“编辑”图标（绿色编辑图标）时，我可以输入表格的值。

我不知道如何获取数组的确切位置（为了显示所有这些用户，我使用的是数组，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> 

我该怎么做呢，伙计们？你能帮助我吗？我在 DataTables API 上进行了搜索，但我迷路了。 提前谢谢！

祝你有美好的一天！

【问题讨论】：

我猜你的数据库中的数据有一个主键，可能叫做id。因此，您将 id 添加到行的某处，作为 tr <tr data-id='<?php echo $r->id?>'> 的属性或隐藏的 td <td style='display:none;'><?php echo $r->id?></td> （不要使用 style='display:none' 使用 css 隐藏它）。然后你的编辑知道哪一行正在被它的 ID 编辑（而不是行索引，它可能不匹配）

哦，是的...我有一个名为 ID 的字段！好主意！如果我想访问该 ID 以将其存储在变量中并稍后进行查询怎么办？例如，从该 ID 运行 SQL 更新语句。我怎样才能做到这一点？提前谢谢！

和你已经做的一样，如果是一列然后nodoTr[0].textContent（并调整你的其他列索引）。如果是数据属性，则为 $(nodoTr).data("id")（或 vanilla js 等效项）。

非常感谢，伙计！！！！！！我不能投票给你，因为我是 *** 的新手，但真的很感谢！

郑重声明，这种“按偏移量更新”方法一直是许多应用程序中的麻烦源。当两个或更多人在处理数据并且一个人删除一条记录时，麻烦就来了，导致另一个人的更改被应用到不正确的记录上，因为相对偏移量发生了变化。使用freedomn-m提到的记录的唯一ID是要走的路。

【参考方案1】：

由于您有一个名为 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:none' 使用 css 来隐藏它，这里只是一个示例来显示它是隐藏的）。

那么你的编辑就可以通过ID知道哪一行正在被编辑（而不是行索引，可能与DBID不匹配）

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

或

var id = nodoTr[0].textContent;

然后，您需要将 id 传递给您的内联编辑，在某种程度上，这可以通过将作为参数添加到 onsubmit 中，例如：

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

【讨论】：

谢谢。你是老板！