How to remove a value from an html table depending on the selected value with an input check, jquery?

Question

How to remove a value from an html table depending on the selected value with an input check, jquery?

Navigation

#1 by (1 votes)

2

Good morning.

I currently have 2 tables in this way:

The table we lend the genre dynamically in the following way:

var prestamos_creditos = $('.prestamos_creditos');
                    $.each(response.data, function(index,value){
                        $('<tr>')
                            .append($('<td/>').addClass('nuevo-td noPrestamo').text(value.Numero_Prestamo))
                            .append($('<td/>').addClass('nuevo-td fiador').text(value.Cod_Cliente_P))
                            .append($('<td/>').addClass('nuevo-td montoPrestamo').text(value.Saldo.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')))
                            .append('<div class="monto_prestamo_seleccionado" style="display:none">' + value.Saldo + '</div>')
                            .append('<div class="fecha_prestamo" style="display:none">' + value.Fecha + '</div>')
                            .append('<div class="numero_prestamo" style="display:none">' + value.Numero_Prestamo + '</div>')
                            .append('<div class="cod_cliente_prestamo" style="display:none">' + value.Cod_Cliente_P + '</div>')
                            .append($('<td/>').addClass('label-cell nuevo-td classCantidad')
                                .append($('<label/>').addClass('label-checkbox item-content')
                                            .append('<input type="checkbox" name="prestamo" class="prestamo" value="' + value.Cod_Tipo_Prestamo + '"/>')
                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                            .appendTo(prestamos_creditos);
                    });

In the table "Credit loans assigned to your code" I select a loan, which will fill the table "Selected forms of payment".

function formaspagoSeleccionadas(nombre_forma_pago, cantPago,resultado, fecha_prestamo, numero_documento, cod_cliente){
        console.log("FUNCION, FORMAS PAGOS SELECCIONADOS: ");
        console.log(nombre_forma_pago);
        console.log(cantPago);
        console.log(resultado);
        console.log(fecha_prestamo);
        console.log(numero_documento);
        console.log(cod_cliente);

        let formas_pagos_seleccionados = $('.formas_pagos_seleccionados');
        $('<tr class="pagos"/>')
            .append($('<td>/').addClass('nuevo-td')
                .append($('<label/>').addClass('label-radio item-content').text(nombre_forma_pago)))
            .append($('<td/>').addClass('label-cell nuevo-td').text(cantPago))
            .append('<div class="fecha_prestamo" style="display:none">' + fecha_prestamo + '</div>')
            .append('<div class="numero_documento" style="display:none">' + numero_documento + '</div>')
            .append('<div class="cod_cliente" style="display:none">' + cod_cliente + '</div>')
            .append('<div class="monto" style="display:none">' + cantPago + '</div>')
            .append($('<td/>').addClass('label-cell').append('<button value="' + resultado + '" type="button" class="eliminarformaPago button button-fill button-raised button-circle" title="Comment"><i class="fa fa-trash-o"></i></button>'))
            .appendTo(formas_pagos_seleccionados);
        console.log("Este es el resultado despues de llenar la tabla: "+resultado);
        $('.saldo_pendiente').text(resultado.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
    }

In the selected forms of payment table I have a button to delete the record, for which I have the following function:

$$('.formas_pagos_seleccionados').on('click', '.eliminarformaPago', function(){
        console.log("Eliminar forma de pago");
        let forma_pago = $(this).closest('tr');
        let fecha_prestamo = forma_pago.find('.fecha_prestamo').text();
        let numero_documento = forma_pago.find('.numero_documento').text();
        let cod_cliente      = forma_pago.find('.cod_cliente').text();
        let monto            = forma_pago.find('.monto').text();
        let cod_banco;
        console.log(idPedido);
        console.log(cod_forma_pago);
        console.log(monto);
        console.log(cod_banco);
        console.log(fecha_prestamo);
        console.log(numero_documento);
        console.log(cod_cliente); 
        $(this).closest('tr').remove();
    });

The detail that I want to solve is when you remove the check of the loan that you have selected in the table "Loans of credit assigned to your code" in the same way automatically delete the record of the table "Selected forms of payment". For this case, select loan 0001, and add it to the other table, then remove the check from 0001 and delete record 0001 from the table "selected forms of payment"

Thank you in advance.

jquery

asked by JG_GJ 18.10.2018 в 17:09

source

1 answer

Center in javascript and leave space between lines Problems with the toast in android studio

score 1 · Accepted Answer

Well what I did was to emulate your two already created tables and create a change event to the checkbox , this event can be integrated into the functionality you already have, which Was it my idea? good in the event change evaluated if the chekcbox is distilled like this:

if(!$(this).is(":checked")){

If it is positive, I get its value let valor = $(this).val(); and then I look for the td in the table of "Forms of Payment" which contains as text the value of checkbox like this:

$("#formas").find('td:contains('${valor}')').parent().remove();

$("input[type='checkbox']").change(function(){
  
  if(!$(this).is(":checked")){
    let valor = $(this).val();
    $("#formas").find('td:contains('${valor}')').parent().remove();
    
  }
  
});

#formas{
margin-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="prestamos" border="1">
  <thead>
    <tr>
      <th colspan="4">Préstamo de Crédito</th>
    </tr>
    <tr>
      <th>No. Prestamo</th>
      <th>Fiador</th>
      <th>Monto</th>
      <th>Seleccionar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>DDDDDDDD</td>
      <td>55,000.00</td>
      <td>
        <input type="checkbox" checked value="0001">
      </td>
    </tr>
    <tr>
      <td>0002</td>
      <td>D61466</td>
      <td>50,000.00</td>
      <td>
        <input type="checkbox" checked value="0002">
      </td>
    </tr>
  </tbody>
</table>

<table id="formas" border="1">
  <thead>
    <tr>
      <th colspan="2">Formas de Pago</th>
    </tr>
    <tr>
      <th>Forma de pago</th>
      <th>Pago</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>6000</td>
    </tr>
    <tr>
      <td>0002</td>
      <td>6004</td>
    </tr>
    <tr>
      <td>0001</td>
      <td>6000</td>
    </tr>
  </tbody>
</table>

Of course I did it as generic as possible but maybe instead of looking for it by the contents of td to the row or tr of the table "Forms of Payment" you put a pseudo attribute that refers to the value of the checkbox to then delete it, it's the same philosophy, it would look something like this:

$("input[type='checkbox']").change(function(){
  
  if(!$(this).is(":checked")){
    let valor = $(this).val();
    $("#formas").find('tr[data-id="${valor}"]').remove(); 
  }
  
});

#formas{
margin-top:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="prestamos" border="1">
  <thead>
    <tr>
      <th colspan="4">Préstamo de Crédito</th>
    </tr>
    <tr>
      <th>No. Prestamo</th>
      <th>Fiador</th>
      <th>Monto</th>
      <th>Seleccionar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>DDDDDDDD</td>
      <td>55,000.00</td>
      <td>
        <input type="checkbox" checked value="0001">
      </td>
    </tr>
    <tr>
      <td>0002</td>
      <td>D61466</td>
      <td>50,000.00</td>
      <td>
        <input type="checkbox" checked value="0002">
      </td>
    </tr>
  </tbody>
</table>

<table id="formas" border="1">
  <thead>
    <tr>
      <th colspan="2">Formas de Pago</th>
    </tr>
    <tr>
      <th>Forma de pago</th>
      <th>Pago</th>
    </tr>
  </thead>
  <tbody>
    <tr data-id="0001">
      <td>0001</td>
      <td>6000</td>
    </tr>
    <tr data-id="0002">
      <td>0002</td>
      <td>6004</td>
    </tr>
    <tr data-id="0001">
      <td>0001</td>
      <td>6000</td>
    </tr>
  </tbody>
</table>

If you look at the tr of the "Forms of payment" table, you add a pseudo attribute called data-id which will contain the value of the checkbox that you want to reference, there you can place the payment id etc and name that attribute as best you want, I hope it's useful.