如何檢查 html 表是否在 js 中重復行並對輸入求和而不是插入另一行？

Question

我在做 POS 系統時正在學習 JS，我很難弄清楚如何在插入之前檢查添加的產品是否已經被掃描，如果是，請更改數量輸入。

到目前為止，當我掃描它插入的產品 ID 時沒有問題，但是當我掃描相同的 ID 時，它會插入一個新行。 看來我的 function 妥協不起作用。 我嘗試與其他人一起使用 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 妥協

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

});
return true;

}

Answer 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;
}

Answer 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>';

Answer 3

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