Go through a select row of a table with javascript

Question

Go through a select row of a table with javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I'm trying to go through a table which in each box has select , which I use to calculate a sum, my problem is how can I get the value of the td , because if I do it, but I do not know how I can take that value from the select of a td .

Code tr of my table:

 <tr class="fila0" style="background: white;">                                          
  <td>
    <?php 
        echo $procesos[1];
        $i++;
    ?>
  </td>     
  <?php 
    $i=0;
    $dato=$objCriterio->listar_criterio($idEmpresa,$idUnidadNegocio);
    foreach ($dato as $criterio) { 
      $idCriterio=$criterio[0];
      $p=$criterio[4];
    ?>
    <td>
      <select id="OBJ<?php echo $idCriterio;?>" name="COE" onchange="FunSumT('OBJ'+<?php echo $idCriterio;?>,<?php echo $p ;?>);">
        <option value='0'>0</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5</option>
      </select>
    </td>
  <?php $i++;} ?>   
   <?php 
    $i=0;
    $dato=$objProceso->listar_Proceso($idUnidadNegocio);
    foreach ($dato as $procesos) { ?>
      <td id="total<?php echo $i;?>"></td>
    <?php $i++;}  ?>              
</tr>

JS code

var tam=$('.fila0 td').length;
if(acum=="")
  acum=0;
$('.fila0 td').each(function(i){
if(i>0 && i<tam-1){
  // parseInt(suma.options[suma.selectedIndex].value)*p
  console.log($(this).html());
}

javascript jquery html5 php

asked by Luis Fernando Zumaran 02.06.2018 в 06:20

source

3 answers

0

I can recommend that you include the table in a form, later when you want to go through the values of the elements inside, whether they are inputs, select, textarea, etc ...

you can rescue them with jQuery, example:

$('form').serialize()

I add a library link for your knowledge: link

luck !!

answered by 02.06.2018 в 17:33

0

var sumValue = 0,
     $this;
$('.fila0 td').each(function(i){
    $this = $(this)
    $("option",$this).each(function (index, element) {
        sumValue += $(this).attr("value") // Obtiene values
        sumValue += $(this).html() // Obtiene valor dentro del select
    });
})

In case you require all values within the select

answered by 02.06.2018 в 19:30

python is not running the program in sublime 3 Rails 5 + Datatables

score 0 · Accepted Answer

Although it seems that you already solved it, I leave you this other possibility using pure Javascript, by using querySelectorAll .

It is about collecting all the select of the table, which you have previously given the name of a class to identify it (you can use another identifier).

Then you add the values in an accumulator.

var btnEnviar = document.getElementById("btnEnviar");

btnEnviar.onclick = function() {
  /*Acumulador*/
  var totalValue = 0;
  /*Seleccionamos todos los select de los elementos con la clase mi-tabla*/
  var allSelect = document.querySelector(".mi-tabla").querySelectorAll("select");

  /*Recorremos los select para sumar los valores*/
  allSelect.forEach(function(item) {
    /*Hay que parsear el valor a entero base 10*/ 
    totalValue += parseInt(item.value, 10);
  });
  console.log("El total es: " + totalValue);


}

<table class="mi-tabla">
  <tr>
    <td>
      <select name="col1">
        <option value="0">--Seleccione celda 1--</option>
        <option value="1" selected>Uno</option>
        <option value="2">Dos</option>
        <option value="3">Tres</option>
      </select>
    </td>
    <td>
      <select name="col2">
        <option value="0">--Seleccione celda 2--</option>
        <option value="1">Uno</option>
        <option value="2" selected>Dos</option>
        <option value="3">Tres</option>
      </select>
    </td>
    <td>
      <select name="col3">
        <option value="0">--Seleccione celda 3--</option>
        <option value="1">Uno</option>
        <option value="2">Dos</option>
        <option value="3" selected>Tres</option>
      </select>
    </td>
  </tr>
</table>
<button id="btnEnviar">Calcular</button>