如何检查html表是不是在js中重复行并对输入求和而不是插入另一行？

Posted 2023-03-29

【中文标题】如何检查html表是不是在js中重复行并对输入求和而不是插入另一行？

【英文标题】：how to check if a html table has duplicated rows in js and sum inputs instead of insert another row?如何检查html表是否在js中重复行并对输入求和而不是插入另一行？

【发布时间】：2021-08-16 03:43:18

【问题描述】：

我在做 POS 系统的同时学习 JS，我很难弄清楚如何在插入之前检查添加的产品是否已经被扫描，如果是，请更改数量输入。

到目前为止，当我扫描产品 ID 时，它插入没有问题，但是当我扫描相同的 ID 时，它会插入新行。看来我的功能补偿不起作用。我尝试与其他使用 for 在行中搜索，并尝试了一些我在网上找到的解决方案，但似乎没有任何效果。

这里是它发生的一个例子

https://gfycat.com/respectfultemptingeastrussiancoursinghounds

idProductos 是主键，隐藏在行中，所以我介绍了 codigo（它是另一个唯一列，两者都不能为空）。

有人可以帮助我吗？我迷路了。

这是我的代码

    $.ajax(
        method: "POST",
        url: "../php/venta.php",
        data: param,
        success: function(data) 
            if (data != null) 

                var idProductos,
                    Codigo,
                    nombre,
                    precioVenta;

                // console.log(data);

                var rows = jQuery.parseJSON(data);

                idProductos = rows[0].idProductos;
                Codigo = rows[0].Codigo;
                nombre = rows[0].nombre;
                precioVenta = rows[0].precioVenta;

                (idProductos)

                if (comprobacion(idProductos) == false) 

                    var nuevoValor = $(parseInt($('.inputCantidad')[i]).val()) + 1;

                    $($('.inputCantidad')[i]).val(nuevoValor);

                    var valorImporte = $($('.inputprecioVenta')[i]).val() * nuevoValor;

                    $($('.inputImporte')[i]).val(valorImporte);

                 else 

                    var table = document.getElementById('tablaVenta');

                    var newRow = document.createElement("tr");
                    newRow.align = "center";

                    var contentRow =
                        '<td><input type="hidden" class="inputId" value="' + idProductos + '">' + Codigo + '</td>' +
                        '<td>' + nombre + '</td>' +
                        '<td><input class="inputprecioVenta" value="' + precioVenta + '"></td>' +
                        '<td><input class="inputCantidad" value="1"></td>' +
                        '<td><input class="inputImporte" value="' + precioVenta + '"></td>';

                    newRow.innerhtml = contentRow;


                    table.appendChild(newRow);

                

            
        ,
        error: function(jqXHR, textStatus, errorThrown)  //errores
            alert(jqXHR + textStatus + errorThrown);

        ,

    )

功能补偿

    function comprobacion(idProductos) 
var id = $(idProductos).val();
$('tbody tr').each(function() 
    if ($(this).val() == id) 
        return false;
    

);
return true;

【问题讨论】：

欢迎来到 ***！请参加tour（并在您使用时获得徽章）/另请阅读我们的How to Ask页面和edit您的问题以改进它。好的问题往往会从社区中得到更快、更好的答案。对于初学者，请在您的问题中添加minimal reproducible example。否则，可能需要更多时间和大量猜测才能准确找出问题所在。

comprobacion 中的

$(this) 指的是 tr 元素，它没有与 val() 相关的值。同样从传递给 each 的函数返回 false 只会导致 each 停止迭代，它不会从周围的函数返回 false。

【参考方案1】：

我会使用自定义数据属性（如data-id）将 id 添加到行中，并使用它，以及一些巧妙的选择器创建来快速识别之前是否使用过 id。

$.ajax(
    method: "POST",
    url: "../php/venta.php",
    data: param,
    success: function(data) 
        if (data != null) 

            var idProductos,
                Codigo,
                nombre,
                precioVenta;

            // console.log(data);

            var rows = jQuery.parseJSON(data);

            idProductos = rows[0].idProductos;
            Codigo = rows[0].Codigo;
            nombre = rows[0].nombre;
            precioVenta = rows[0].precioVenta;

            (idProductos)

            if (comprobacion(idProductos) == false) 

                var nuevoValor = $(parseInt($('.inputCantidad')[i]).val()) + 1;

                $($('.inputCantidad')[i]).val(nuevoValor);

                var valorImporte = $($('.inputprecioVenta')[i]).val() * nuevoValor;

                $($('.inputImporte')[i]).val(valorImporte);

             else 

                var table = document.getElementById('tablaVenta');

                var newRow = document.createElement("tr");
                newRow.align = "center";
/* Add the line below */
                newRow.setAttribute("data-id", idProductos);

                var contentRow =
                    '<td><input type="hidden" class="inputId" value="' + idProductos + '">' + Codigo + '</td>' +
                    '<td>' + nombre + '</td>' +
                    '<td><input class="inputprecioVenta" value="' + precioVenta + '"></td>' +
                    '<td><input class="inputCantidad" value="1"></td>' +
                    '<td><input class="inputImporte" value="' + precioVenta + '"></td>';

                newRow.innerHTML = contentRow;


                table.appendChild(newRow);

            

        
    ,
    error: function(jqXHR, textStatus, errorThrown)  //errores
        alert(jqXHR + textStatus + errorThrown);

    ,

)

那么，comprobacion 函数就变得更简单了：

function comprobacion(idProductos) 
  return $('tbody tr[data-id="' + idProductos + '"]').length === 0;

【讨论】：

感谢您的宝贵时间，我刚刚尝试了您给我的调整。还是一样的问题，还是加了重复项。

我刚查了一下，idProductos是唯一的，主键gfycat.com/respectfultemptingeastrussiancoursinghounds

也许我误解了comprobacion 应该返回的内容；如果表中不存在 id，则此代码返回 true。

是的，如果 id 不存在则返回 true。

您添加了设置“data-id”属性的行？您是否会快速连续触发大量此类 ajax 调用？如果代码没有在表中附加一行，并且再次调用comprobacion，我可能会看到它失败，因为从技术上讲，该行在 DOM 中不存在让 jQuery 看到它。

【参考方案2】：

将 id 设置为 HTML 输入，使用 JS 查找 ProductID 更快捷。

'<td><input type="hidden" id="hid_' + idProductos + '" class="inputId" value="' + idProductos + '">' + Codigo + '</td>' +
'<td>' + nombre + '</td>' +
'<td><input id="hid_' + idProductos + '" class="inputprecioVenta" value="' + precioVenta + '"></td>' +
'<td><input id="qty_' + idProductos + '" class="inputCantidad" value="1"></td>' +
'<td><input id="cst_' + idProductos + '" class="inputImporte" value="' + precioVenta + '"></td>';

【参考方案3】：

试试$('tbody tr td').each(function()。 值在 td 中，而不是 tr

【讨论】：

td 元素也没有 value 属性。只有 input、select、button 和 textarea 有值

您好，感谢您的回复。我没注意到。可惜还是不行

是的，看起来太快了。使用 $(".inputId") 作为选择器

你可以edit你的答案使其正确...否则，它不能正确回答问题