Go through a table with different inputs and print them in another

Question

Go through a table with different inputs and print them in another

Navigation

#1 by (2 votes)

0

I have been having difficulties planning the logic for this problem.

I have a table with various types of input ( text, date, checklist ) and I want to print them in the order given by the first table, but I have problems when I select some input .

This is the HTML code I am using:

Update: How could you save the second date of the validity and save the value of select ?

$('#botones').click(function() {
  var values = [];

  $('#TableID input[class="chk"]:checked').each(function() {
    var row = $(this).closest("tr");
    values.push({
      eleccion: $(this).val(),
      especificacion: $(row).find("input[name=id]").val(),
      suma: $(row).find("input[name=cobertura_suma]").val(),
      plazo: $(row).find('option:selected').val(),/*Aqui quiero guardar el valor del select, pero no se como*/
      vigencia: $(row).find("input[name=cobertura_vigencia_ini] ").val(),
      gen: $(row).find("input[name=cobertura_vigencia_fin] ").val()/*no me deja sacar el valor de esta fecha*/

    });
  });
  console.log(values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tablaMaestra" id="tablaMaestra">
  <thead>
    <tr>
      <th>Tipo de póliza <br>Marcar la opción(es)</th>
      <th>Moneda (Especificar)</th>
      <th>Suma Asegurada</th>
      <th>Plazo de vigencia <br>de la fianza</th>
      <th>Vigencia (desde / hasta)</th>
    </tr>
  </thead>
  <tbody id="TableID">
    <tr>

      <td class="tipo_id[]">
        <input type="checkbox" name="poliza" value="seriedad" class="chk" id="chk">Seriedad de oferta
      </td>
      <td class="tipo_id[]">
        <div class="cambio_dinero ">
          <select name="cobertura_moneda" id="cobertura_moneda" class="cobertura_moneda">
            <option value="S/">S/</option>
            <option value="$">$</option>
            <option value="£">£</option>
          </select>
        </div>

      </td>

      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>

      <td class="tipo_id[]">
        <input type="text" name="cobertura_fianza" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>

      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>

    </tr>

    <tr>
      <td cclass="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="fiel">Fiel Cumplimiento</td>
      <td class="tipo_id[]">
        <select name="" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>
    <tr>
      <td class="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="directo">Adelanto Directo</td>
      <td class="tipo_id[]">
        <select name="" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>
    <tr>
      <td class="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="materiales">Adelanto para materiales</td>
      <td class="tipo_id[]">
        <select name="" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>
    <tr>
      <td class="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="otros">Otros(Especificar) <input type="text" class="opciones_otros" size="4" id="opciones_otros" placeholder="Especifique"></td>
      <td class="tipo_id[]">
        <select name="" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>

  </tbody>
</table>
<button id="botones" class="botones">botones</button>

<div id="section-to-print">

  <table class="impresion">
    <div class="modelo clearfix">

      <tr class=" nuevo">
        <td>Tipo de póliza <br>Marcar la opción(es)</td>
        <td>Moneda (Especificar)</td>
        <td>Suma Asegurada</td>
        <td>Plazo de vigencia <br>de la fianza</td>
        <td>Vigencia (desde / hasta)</td>
      </tr>
      <tr class=" nuevo">
        <td class="cober_poliza"></td>

        <td class="cober_moneda cober_dinero"></td>


        <td class="cober_suma"></td>
        <td class="cober_fianza"></td>
        <td class="cober_vigencia_ini cober_vigencia_fin"></td>

      </tr>

      <tr class=" nuevo">
        <td class="cobertura_poliza1"></td>

        <td class="cober_moneda1 cober_dinero1"></td>

        <td class="cober_suma1"></td>
        <td class="cober_fianza1"></td>
        <td class="cober_vigencia_ini1 cober_vigencia_fin1"></td>
      </tr>

      <tr class=" nuevo">
        <td class="cobertura_poliza2"></td>

        <td class="cober_moneda2 cober_dinero2"></td>

        <td class="cober_suma2"></td>
        <td class="cober_fianza2"></td>
        <td class="cober_vigencia_ini2 cober_vigencia_fin2"></td>
      </tr>
      <tr class="nuevo">
        <td class="cobertura_poliza3"></td>

        <td class="cober_moneda3 cober_dinero3"></td>

        <td class="cober_suma3"></td>
        <td class="cober_fianza3"></td>
        <td class="cober_vigencia_ini3 cober_vigencia_fin3"></td>
      </tr>
      <tr class="nuevo">
        <td class="cobertura_poliza4"></td>

        <td class="cober_moneda4 cober_dinero4"></td>

        <td class="cober_suma4"></td>
        <td class="cober_fianza4"></td>
        <td class="cober_vigencia_ini4 cober_vigencia_fin4"></td>
      </tr>
  </table>

  </div>

javascript jquery

asked by Alexander Becerra 14.12.2018 в 23:39

source

1 answer

What does the math.floor () function JS What code do I need to know if my android app has mobile internet (data) or wifi?

score 2 · Answer 1

several things:

Beware of the HTML . You are using the same id for the same elements in your different <tr> ( cobertura_moneda , cobertura_vigencia_ini , etc.). Keep in mind that the ids must be unique. On the other hand, you are defining the name of cobertura_moneda in the first select but not in the following ones and when using the selectors by name it will not work for you.

Selectors. There are several errors:

Here you are looking for a input whose name is id :

$(row).find("input[name=id]").val()

What you should do is look for a select (it is not input type if not select ) whose name is cobertura_moneda . And specifically the option selected ( more info about selectors). Here I put it to show the .val() but you might want to get the .text()

$(row).find("select[name=cobertura_moneda] option:selected").val()

At this point I understand that you want to get the value of select cobertura_moneda :

plazo: $(row).find('option:selected').val(),/*Aqui quiero guardar el valor del select, pero no se como*/

In that case it would be like I have put before:

$(row).find("select[name=cobertura_moneda] option:selected").val()

Finally here I do not finish understanding the problem.

gen: $(row).find("input[name=cobertura_vigencia_fin] ").val()/*no me deja sacar el valor de esta fecha*/

I see it well:

[
  {
    "eleccion": "seriedad",
    "especificacion": "S/",
    "suma": "234",
    "plazo": "S/",
    "vigencia": "2018-12-04",
    "gen": "2018-12-27"
  }
]

Here is an example that works (the ids have not been changed to be unique, it should be done):

$('#botones').click(function() {
  let values = [];

  $('#TableID input[class="chk"]:checked').each(function() {
    let row = $(this).closest("tr");
    values.push({
      eleccion: $(this).val(),
      especificacion: $(row).find("select[name=cobertura_moneda] option:selected").val(),
      suma: $(row).find("input[name=cobertura_suma]").val(),
      plazo: $(row).find("select[name=cobertura_moneda] option:selected").val(),/*Aqui quiero guardar el valor del select, pero no se como*/
      vigencia: $(row).find("input[name=cobertura_vigencia_ini] ").val(),
      gen: $(row).find("input[name=cobertura_vigencia_fin] ").val()/*no me deja sacar el valor de esta fecha*/

    });
  });
  console.log(values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tablaMaestra" id="tablaMaestra">
  <thead>
    <tr>
      <th>Tipo de póliza <br>Marcar la opción(es)</th>
      <th>Moneda (Especificar)</th>
      <th>Suma Asegurada</th>
      <th>Plazo de vigencia <br>de la fianza</th>
      <th>Vigencia (desde / hasta)</th>
    </tr>
  </thead>
  <tbody id="TableID">
    <tr>
      <td class="tipo_id[]">
        <input type="checkbox" name="poliza" value="seriedad" class="chk" id="chk">Seriedad de oferta
      </td>
      <td class="tipo_id[]">
        <div class="cambio_dinero ">
          <select name="cobertura_moneda" id="cobertura_moneda" class="cobertura_moneda">
            <option value="S/">S/</option>
            <option value="$">$</option>
            <option value="£">£</option>
          </select>
        </div>

      </td>

      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>

      <td class="tipo_id[]">
        <input type="text" name="cobertura_fianza" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>

      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>

    </tr>

    <tr>
      <td cclass="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="fiel">Fiel Cumplimiento</td>
      <td class="tipo_id[]">
        <select name="cobertura_moneda" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>
    <tr>
      <td class="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="directo">Adelanto Directo</td>
      <td class="tipo_id[]">
        <select name="cobertura_moneda" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>
    <tr>
      <td class="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="materiales">Adelanto para materiales</td>
      <td class="tipo_id[]">
        <select name="cobertura_moneda" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>
    <tr>
      <td class="tipo_id[]"><input type="checkbox" class="chk" name="poliza" value="otros">Otros(Especificar) <input type="text" class="opciones_otros" size="4" id="opciones_otros" placeholder="Especifique"></td>
      <td class="tipo_id[]">
        <select name="cobertura_moneda" id="cobertura_moneda" class="cobertura_moneda">
          <option value="soles">S/</option>
          <option value="dolar">$</option>
          <option value="euros">£</option>
        </select>
      </td>
      <td class="tipo_id[]">
        <input type="text" name="cobertura_suma" id="cobertura_suma" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="text" id="cobertura_fianza" style="width:100px" class="cobertura">
      </td>
      <td class="tipo_id[]">
        <input type="date" name="cobertura_vigencia_ini" id="cobertura_vigencia_ini">
        <input type="date" name="cobertura_vigencia_fin" id="cobertura_vigencia_fin">
      </td>
    </tr>

  </tbody>
</table>
<button id="botones" class="botones">botones</button>

<div id="section-to-print">

  <table class="impresion">
    <div class="modelo clearfix">

      <tr class=" nuevo">
        <td>Tipo de póliza <br>Marcar la opción(es)</td>
        <td>Moneda (Especificar)</td>
        <td>Suma Asegurada</td>
        <td>Plazo de vigencia <br>de la fianza</td>
        <td>Vigencia (desde / hasta)</td>
      </tr>
      <tr class=" nuevo">
        <td class="cober_poliza"></td>

        <td class="cober_moneda cober_dinero"></td>


        <td class="cober_suma"></td>
        <td class="cober_fianza"></td>
        <td class="cober_vigencia_ini cober_vigencia_fin"></td>

      </tr>

      <tr class=" nuevo">
        <td class="cobertura_poliza1"></td>

        <td class="cober_moneda1 cober_dinero1"></td>

        <td class="cober_suma1"></td>
        <td class="cober_fianza1"></td>
        <td class="cober_vigencia_ini1 cober_vigencia_fin1"></td>
      </tr>

      <tr class=" nuevo">
        <td class="cobertura_poliza2"></td>

        <td class="cober_moneda2 cober_dinero2"></td>

        <td class="cober_suma2"></td>
        <td class="cober_fianza2"></td>
        <td class="cober_vigencia_ini2 cober_vigencia_fin2"></td>
      </tr>
      <tr class="nuevo">
        <td class="cobertura_poliza3"></td>

        <td class="cober_moneda3 cober_dinero3"></td>

        <td class="cober_suma3"></td>
        <td class="cober_fianza3"></td>
        <td class="cober_vigencia_ini3 cober_vigencia_fin3"></td>
      </tr>
      <tr class="nuevo">
        <td class="cobertura_poliza4"></td>

        <td class="cober_moneda4 cober_dinero4"></td>

        <td class="cober_suma4"></td>
        <td class="cober_fianza4"></td>
        <td class="cober_vigencia_ini4 cober_vigencia_fin4"></td>
      </tr>
  </table>

  </div>