0

Cordial saludo para todos. Tengo un problema y espero de su valiosa y acostumbrada colaboración.

Tengo una tabla de artículos, el cual se va a agregando filas de forma automática. Dichas filas tienes unos inputs que se van a rellenar de acuerdo a la selección de un datalist. Pero solo lo hace con la primera fila, no funciona con las filas que se van agregando. He intentando hacerlo con forEarch, for, while y each pero nada que funciona. NO entiendo porque sólo funciona con la primera fila y y no con los demás.

Este es el código HTML

<table class="tablas" id="table_items">
    <thead class="thead">
        <tr>
            <th style="text-align: center" width="25px" class="tablason">#</th>
            <th width="190px" class="tablason">PRODUCT/SERVICE</th>
            <th width="1600px" class="tablason">DESCRIPTION</th>
            <th width="90px" class="tablason" style="text-align: right">QTY</th>
            <th width="90px" class="tablason" style="text-align: right">PRICE</th>
            <th width="90px" class="tablason" style="text-align: right">DISCOUNT</th>
            <th width="90px" class="tablason" style="text-align: right">AMOUNT</th>
            <th width="43px" class="tablason"></th>
        </tr>
    </thead>
    <tbody id="table_body">
        <tr class="tr" id="row_item1" name="row_item[]">
            <td width="25px"  class="tablason tr">1</td>
            <td width="190px"  class="tablason tr"><input type="text" list="list_item1" id="search1" name="search[]" size="20" style="display:none;">
                <datalist id="list_item1">
                    <option value="Uno"</option>
                    <option value="Dos"</option>
                    <option value="Tres"</option>
                </datalist>
            </td>
            <td width="1600px" class="tablason tr"><input type="text" id="item1" name="item[]" size="85" style="display:none;" readOnly></td>
            <td width="90px" class="tablason tr"><input type="text" id="qt1" name="qt[]" size="5" style="text-align: right; display:none;"></td>
            <td width="90px" class="tablason tr"><input type="text" id="price1" name="price[]" size="10" style="text-align: right; display:none;" readOnly></td>
            <td width="90px" class="tablason tr"><input type="text" id="discount1" name="discount[]" style="text-align: right; display:none;" size="10"></td>
            <td width="90px" class="tablason tr"><input type="text" id="amount1" name="amount[]" style="text-align: right; display:none;" size="10" readOnly></td>
            <td class="tablason tr" align="center" valign="middle"><a href="#" class="adelete1" style="text-decoration:none; color: #444;"><i class="icon-trash-o"></i></a></td>
        </tr>
    </tbody>
</table>
<button id="add_lines">Add Lines</button> 

Este es el código JQUERY:

$("#add_lines").click(function(e){
    e.preventDefault();
    var row_content = $("#table_body").find('tr').first().html();
    var row_new = $("<tr class='tr' id='row_item"+contador+"'  name='row_item[]'></tr>");
    row_new.append(row_content);
    $("#table_body").append(row_new);
    reorder();
}); 
$('#table_items tbody').find('tr').each(function(index,element){
    $(this).on('click', function(e){
        $(this).find('input').show();
        $(this).find('td').css("border-left","none");
        $(this).find('td').css("border-right","none");
    });
    $(this).on('input', ':input', function(e) { 
        var idItem = $("#search"+counter).val();
        var val = $('#list_item'+counter+' [value="' + idItem + '"]').data('value');
        var desc = $('#list_item'+counter+' [value="' + idItem + '"]').data('desc');
        $("#item"+counter).val(desc);
        $("#qt"+counter).val(1);
        $("#price"+counter).val(val);
        $("#discount"+counter).val(0);
        $("#amount"+counter).val(val);
    });
});

$(document).on('click', function () {
    $('#table_items tr td').css("border-left","solid 1px #CECFD1");
    $('#table_items tr td').css("border-right","solid 1px #CECFD1");
});

function reorder() {
    var num=1;
    $('#table_items tbody tr').each(function(){
        $(this).find('td').eq(0).text(num);
        num++;
    });
}

Agradezco la ayuda que me puedan ofrecer.

2
  • ¿Por qué no coges la clase común de css en vez del id? el 8 jun. 2020 a las 13:36
  • Hola Nicolas, gracias por responder. Hice también la prueba con la clase pero sigue el mismo inconveniente.
    – Marlon
    el 8 jun. 2020 a las 14:00

3 respuestas 3

0

Colegas, encontré el siguiente código. Con la primera fila me lo llena sin problemas pero al diligenciar la segunda fila me reemplaza loas anteriores inputs con el nuevo valor:

$(document).on('click','#table_items tbody tr', function(e) {
    $(this).find('input').show();
    $(this).find('td').css("border-left","none");
    $(this).find('td').css("border-right","none");
    e.stopPropagation();    
    $(this).on('input', ':input', function(e) { 
        var idItem = $(this).parents('td').find("input[name='search[]']").val();
        var val = $('#list_item1'+' [value="' + idItem + '"]').data('value');
        var desc = $('#list_item1'+' [value="' + idItem + '"]').data('desc');
        $("input[name='item[]']").val(desc);
        console.log("Product: "+desc+" | "+"Price: "+val+" ");
    });
});
0
0

Buen día.

En su código observo:

$("#add_lines").click(function(e){
    e.preventDefault();
    var row_content = $("#table_body").find('tr').first().html();
    var row_new = $("<tr class='tr' id='row_item"+contador+"'  name='row_item[]'></tr>");
    row_new.append(row_content);
    $("#table_body").append(row_new);
    reorder();
}); 

la variable contador no pones el valor que tiene, ni que esta se este incrementado (cambiando); por tanto al parecer hace siempre referencia al mismo id que se arma al unirlo a id='row_item"+contador+"'; del mismo bloque del código anterior y misma observación a variable counter.

En tu función reorder me parece debe ser $(this).find('td').eq(0).html(num); y no $(this).find('td').eq(0).text(num);

https://stackoverflow.com/questions/23013484/jquery-set-value-of-td-in-a-table https://stackoverflow.com/questions/171027/add-table-row-in-jquery

Saludos.

0

Gracias a los que respondieron. Me sirvieron ambos comentarios. Finalmente solucione el problema. Dejó código por si alguien le pueda ayudar:

var contador = 1;
var tr_item = "";
function addRow() {
     contador++;
     var row_content = $("#table_body").find('tr').first().html();
     var row_new = $("<tr class='tr prueba' id='row_item"+contador+"'  name='row_item[]'></tr>");
     row_new.append(row_content);
     $("#table_body").append(row_new);
     reorder();
}

function deleteRow(id_row) {
     $("#"+id_row).remove();
     reorder();
}

Function reorder() {
     var num=1;
     $('#table_items tbody tr').each(function(){
          $(this).find('td').eq(0).text(num);
          num++;
     });
}

var value_item = "";
var value_qt = "";
var value_price = "";
var value_discount = "";
var value_amount = "";
var value_search = "";
var qt = "";
var price = "";
var amount = "";
var idItem = "";
var val = "";
var desc = "";
var discount = "";
var vDiscount = "";
var percentage = "";
var totalDiscount = "";
var rows = "";
var btnDelete = "";
var tr = "";
var array = [];
$(document).on('click','#table_items tbody tr', function(e, index, value) {
    tr  = $(this).attr("id");
    $(this).find('input').show();
    $(this).find('td').css("border-left","none");
    $(this).find('td').css("border-right","none");
    value_search = $(this).find('#search1');
    value_item = $(this).find('#item1');
    value_qt = $(this).find('#qt1');
    value_price = $(this).find('#price1');
    value_discount = $(this).find('#discount1');
    value_amount = $(this).find('#amount1');
    btnDelete = $(this).find('.adelete1');
    var realcost = 0;    
    
    $(value_search).on('input', function(e) { 
        idItem = $(this).val();
        val = $('#list_item1'+' [value="' + idItem + '"]').data('value');
        desc = $('#list_item1'+' [value="' + idItem + '"]').data('desc');
        //amount = parseFloat(qt)*parseFloat(price);
        value_qt.val(1);
        qt = value_qt.val();
        vDiscount = value_discount.val(0.00);
        value_item.val(desc);
        value_price.val(val);
        value_amount.val(parseFloat(qt)*parseFloat(val));
        array.push(idItem);
        $("#subtotal").text(formatNumber.new(value_amount.val(), "$"));
    });
    
    $(value_qt).on('blur', function() {
        qt = value_qt.val();
        price = value_price.val();
        amount = parseFloat(qt)*parseFloat(price);
        value_amount.val(amount);
        rows = document.querySelectorAll("#table_items tbody tr");
        rows.forEach(function(e) {
            var columns = e.querySelectorAll("td");
            realcost = parseFloat(realcost)+parseFloat($(columns[6]).find('input').val());
            trealcost=formatNumber.new(realcost, "$");
            $("#subtotal").text(trealcost);
        });
    });
    
    $(value_discount).on('blur', function() {
        vDiscount = parseFloat(value_discount.val());
        percentage = parseFloat(vDiscount)/100;
        discount = (parseFloat(percentage) * parseFloat(amount));
        totalDiscount = (parseFloat(amount)-parseFloat(discount));
        value_amount.val(totalDiscount);
        rows = document.querySelectorAll("#table_items tbody tr");
        rows.forEach(function(e) {
            var columns = e.querySelectorAll("td");
            //realcost = parseFloat(realcost)+parseFloat($(columns[6]).find('input').val());
            //trealcost=formatNumber.new(realcost, "$");
            $("#subtotal").text(trealcost);
            
        });
    });
    $(this).find('.adelete1').click(function() {
        var len = $('#table_items tbody tr').length;
        if (len > 1){
            $('#'+tr).remove();
            reorder();
            console.log(tr);
        }
    });
                
    e.stopPropagation();
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.