Clone table with checkbox values

1
  

Updated code. Help from Edson Alves.

I'm having trouble calculating Sum total when unchecking the checkbox. At the moment I'm marking, it calculates right, the problem is in the clearing that should subtract.

$(".c").click(function() {

  var values = $(this).val().split('|');
  if ($(this).prop('checked')) {

    var quantity = $("table[id^=tabelaIE]").length;

    $(this).data('qty', quantity);

    var table = $("#tabelaIE").clone(true)
      .attr('id', function() {
        return this.id + quantity;
      })
      .find(':text,:file')
      .attr('id', function() {
        return this.id + quantity;
      })
      .val("")
      .end();
    //Adiciona valores 1|Taxa de locação|+|15.00|FIX|%|POR|VLT
    table.find('.tNome').text(values[1]);
    table.find('.tDias').text($("#dias").val());
    table.find('.tValor').text(values[3]);
    tTotal = values[3] * $("#dias").val();
    table.find('.tTotal').text(tTotal.toFixed(2));

    values.forEach(function(valor, index) {
      table.find('[class="split' + (index + 1) + '"]').val(valor)
    });

    table.appendTo('#abc');

    var oldVal = $('#somaTabelaIE').val();
    $('#somaTabelaIE').val(eval(oldVal || 0) + eval(tTotal))
  } else {
    var oldVal = $('#somaTabelaIE').val();
    $('#somaTabelaIE').val(oldVal - eval(tTotal))
    //remove a table que pertence ao checkbox
    $("table#tabelaIE" + $(this).data('qty')).remove()
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="hidden" id="dias" value="2">

<div id="abc">
  <div id="abc">
    <table id="tabelaIE" width='400' border='0'>
      <tr>
        <td class="tNome" width='164'></td>
        <td class="tDias" width='36' align='right'></td>
        <td class="tValor" width='53' align='right'></td>
        <td class="tTotal" width='119' align='right'></td>
        <td class="tValores">
          <input type="hidden" class="split1" value="">
          <input type="hidden" class="split2" value="">
          <input type="hidden" class="split3" value="">
          <input type="hidden" class="split4" value="">
          <input type="hidden" class="split5" value="">
          <input type="hidden" class="split6" value="">
          <input type="hidden" class="split7" value="">
          <input type="hidden" class="split8" value="">
        </td>
      </tr>
    </table>
    <br>
    Soma Total: <input type="text" name="somaTabelaIE" id="somaTabelaIE" value="">
  </div>
</div>


<fieldset class="scheduler-border">
	<legend class="scheduler-border">Impostos/Encargos</legend>
	
	<div id="D1">1. 
		<input name="opcoes[]" class="c obrigatorio" type="checkbox" value="1|Texto 1|+|15.00|FIX|%|POR|VLT" alt="+ 0.15 FIX %" title="Texto 1"> <b> Texto 1 </b>
		<input type="text" value="" class="i"> 
	</div>

	<div id="D2">2. 
		<input name="opcoes[]" class="c " type="checkbox" value="2|Texto 2|+|5.00|DIA||MON|DIA" alt="+ 5.00 DIA " title="Texto 2"> Texto 2
		<input type="text" value="" class="i">
	</div>
		
	<div id="D3">3. 
		<input name="opcoes[]" class="c " type="checkbox" value="3|Texto 3|+|30.00|FIX||MON|VLT" alt="+ 30.00 FIX " title="Texto 3"> Texto 3
		<input type="text" value="" class="i">
	</div>
		
	<div id="D4">4. 
		<input name="opcoes[]" class="c " type="checkbox" value="3|Texto 4|+|35,00|FIX||MON|VLT" alt="+ 35,00 FIX " title="Texto 4"> Texto 4
		<input type="text" value="" class="i">
	</div>
</fieldset>
    
asked by anonymous 25.11.2018 / 00:52

1 answer

1

I think I finally understood your question, following modifications:

  $(".c").click(function(){
  			var values = $(this).val().split('|');
        //define se esta marcado ou não
        if($(this).prop('checked')){

           var quantity = $("table[id^=tabelaIE]").length;

           //adiciona o valor para identificar na hora de remover
           $(this).data( 'qty', quantity );

           // Clone the main table
           var table = $("#tabelaIE").clone(true)
           // Change its ID to the current ID plus the quantity variable
           .attr( 'id', function() { return this.id + quantity; })
           // find any text or file inputs
           .find( ':text,:file' )
           // change their IDs
           .attr( 'id', function() { return this.id + quantity; })
           // set the input values to ""
           .val( "" )
           // return to the cloned table
           .end();
           //adiciona valores ao texto dos td
           table.find('.nome').text(values[1]);
           table.find('.dias').text(values[2]);
           table.find('.valor').text(values[3]);
           table.find('.total').text((values[0]) * (values[3]));
           
           //adiciona valores nos inputs em suas posições
           values.forEach(function(valor, index){
           	table.find('[class="split'+(index+1)+'"]').val(valor)
           });
           
           
           // append wherever you want it.
           // As the comment below your question states,
           //   this is not a valid placement
           table.appendTo('#abc');
           var oldVal = $('#somaTabelaIE').val();
           $('#somaTabelaIE').val(eval(oldVal||0) + eval(values[3]))
        }else{
           var oldVal = $('#somaTabelaIE').val();
           $('#somaTabelaIE').val(oldVal - eval(values[3]))
           //remove a table que pertence ao checkbox
           $("table#tabelaIE"+$(this).data('qty')).remove()
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="abc">
	<table id="tabelaIE" width='400' border='0'>
		<tr>
		  <td class="nome" width='164'>Nome</td>
		  <td class="dias" width='36' align='right'>2</td>
		  <td class="valor" width='53' align='right'>60.00</td>
		  <td class="total" width='119' align='right'>120.00 <input type="text" name="opcoe[]" value="" style="width: 50px"></td>
      <td class="valores"> 
      <input type="text" class="split1" value="">
      <input type="text" class="split2" value="">
      <input type="text" class="split3" value="">
      <input type="text" class="split4" value="">
      <input type="text" class="split5" value="">
      <input type="text" class="split6" value="">
      <input type="text" class="split7" value="">
      <input type="text" class="split8" value=""></td>
		</tr>
     
	</table>

	<input type="text" name="somaTabelaIE" id="somaTabelaIE" value="">
</div>


<fieldset class="scheduler-border">
	<legend class="scheduler-border">Impostos/Encargos</legend>
	
	<div id="D1">1. 
		<input name="opcoes[]" class="c obrigatorio" type="checkbox" value="1|Texto 1|+|15.00|FIX|%|POR|VLT|1" alt="+ 0.15 FIX %" title="Texto 1"> <b> Texto 1 </b>
		<input type="text" value="" class="i"> 
	</div>

	<div id="D2">2. 
		<input name="opcoes[]" class="c " type="checkbox" value="2|Texto 2|+|5.00|DIA||MON|DIA" alt="+ 5.00 DIA " title="Texto 2"> Texto 2
		<input type="text" value="" class="i">
	</div>
		
	<div id="D3">3. 
		<input name="opcoes[]" class="c " type="checkbox" value="3|Texto 3|+|30.00|FIX||MON|VLT" alt="+ 30.00 FIX " title="Texto 3"> Texto 3
		<input type="text" value="" class="i">
	</div>
		
	<div id="D4">4. 
		<input name="opcoes[]" class="c " type="checkbox" value="3|Texto 4|+|35,00|FIX||MON|VLT" alt="+ 35,00 FIX " title="Texto 4"> Texto 4
		<input type="text" value="" class="i">
	</div>
</fieldset>

Also available on fiddle: link

    
25.11.2018 / 01:51