0

Tengo un codigo el cual se trata de una tabla que el usuario puede agrandar cuanto desee y la idea es poder recorrer toda la tabla final una vez el usuario oprima el boton de CALCULAR, la idea es hacer uso de un ciclo para recorrer toda la tabla, y por cada fila resta la hora final-hora inicial, minutos final-minutos inicial y segundo final - segundos inicial, para al final convertir todo a minutos y encontrar un total, pero he tenido muchos problemas para poder recorrer y extraer el valor de cada una de las casillas :

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            function addRow() {
                var table = document.getElementById("time");
                var row = table.insertRow(table.rows.length);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                cell1.innerHTML = document.getElementById("initial-hour").innerHTML;
                cell2.innerHTML = document.getElementById("initial-minute").innerHTML;
                cell3.innerHTML = document.getElementById("initial-second").innerHTML;
                cell4.innerHTML = document.getElementById("final-hour").innerHTML;
                cell5.innerHTML = document.getElementById("final-minute").innerHTML;
                cell6.innerHTML = document.getElementById("final-second").innerHTML;
            }
            function deleteRow() {
                var table = document.getElementById("time");                
                var rowCount = table.rows.length;
                if(rowCount>1){
                    table.deleteRow(rowCount-1);
                }                
            }
            function calculate(){
                var totalMinutes = 0;
                var price = document.getElementById("mount").value;
                var table = document.getElementById("time");
                var rowCount = table.rows.length;

                for (var i=0;i<rowCount;i++){
                    //aca deberia ir el codigo para poder recorrer la tabla y sumar cada uno de los valores de cada casilla pero no se como hacerlo
                }
                document.getElementById("result1").innerHTML = totalMinutes;
                price = price*totalMinutes;
                price = '$'+price;
                document.getElementById("result2").innerHTML = price;
            }
        </script>
        <h2 class="initial">Tiempo Inicial</h2>
        <h2 class="final">Tiempo Final</h2>
        <h2 class="total">Total Tiempo [Minutos]</h2>
        <h2 class="result1" id="result1">0</h2>
        <h2 class="total-price">Costo Total</h2>
        <h2 class="result2" id="result2">$0</h2>
        <h2 class="price">Valor Minuto (COP)</h2>
        <input id="mount" class="price-bar" type="number" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" placeholder="$0.00"/>
        <h3 class="init-hour">Hora(s)</h3>
        <h3 class="init-minute">Minuto(s)</h3>
        <h3 class="init-second">Segundo(s)</h3>
        <h3 class="f-hour">Hora(s)</h3>
        <h3 class="f-minute">Minuto(s)</h3>
        <h3 class="f-second">Segundo(s)</h3>
        <table class="table" id="time">
        <tr>
        <td id="initial-hour" style="padding-right: 2cm;">
            <select name="initial-hours" id="initial-hours">
                <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>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
                <option value=11>11</option>
                <option value=12>12</option>
            </select>
        </td>
        <td id="initial-minute" style="padding-right: 2.3cm;">
            <select name="initial-minutes" id="initial-minutes">
                <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>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
                <option value=11>11</option>
                <option value=12>12</option>
                <option value=13>13</option>
                <option value=14>14</option>
                <option value=15>15</option>
                <option value=16>16</option>
                <option value=17>17</option>
                <option value=18>18</option>
                <option value=19>19</option>
                <option value=20>20</option>
                <option value=21>21</option>
                <option value=22>22</option>
                <option value=23>23</option>
                <option value=24>24</option>
                <option value=25>25</option>
                <option value=26>26</option>
                <option value=27>27</option>
                <option value=28>28</option>
                <option value=29>29</option>
                <option value=30>30</option>
                <option value=31>31</option>
                <option value=32>32</option>
                <option value=33>33</option>
                <option value=34>34</option>
                <option value=35>35</option>
                <option value=36>36</option>
                <option value=37>37</option>
                <option value=38>38</option>
                <option value=39>39</option>
                <option value=40>40</option>
                <option value=41>41</option>
                <option value=42>42</option>
                <option value=43>43</option>
                <option value=44>44</option>
                <option value=45>45</option>
                <option value=46>46</option>
                <option value=47>47</option>
                <option value=48>48</option>
                <option value=49>49</option>
                <option value=50>50</option>
                <option value=51>51</option>
                <option value=52>52</option>
                <option value=53>53</option>
                <option value=54>54</option>
                <option value=55>55</option>
                <option value=56>56</option>
                <option value=57>57</option>
                <option value=58>58</option>
                <option value=59>59</option>
            </select>
        </td>
        <td id="initial-second"  style="padding-right: 2.3cm;">
            <select name="initial-seconds" id="initial-seconds">
                <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>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
                <option value=11>11</option>
                <option value=12>12</option>
                <option value=13>13</option>
                <option value=14>14</option>
                <option value=15>15</option>
                <option value=16>16</option>
                <option value=17>17</option>
                <option value=18>18</option>
                <option value=19>19</option>
                <option value=20>20</option>
                <option value=21>21</option>
                <option value=22>22</option>
                <option value=23>23</option>
                <option value=24>24</option>
                <option value=25>25</option>
                <option value=26>26</option>
                <option value=27>27</option>
                <option value=28>28</option>
                <option value=29>29</option>
                <option value=30>30</option>
                <option value=31>31</option>
                <option value=32>32</option>
                <option value=33>33</option>
                <option value=34>34</option>
                <option value=35>35</option>
                <option value=36>36</option>
                <option value=37>37</option>
                <option value=38>38</option>
                <option value=39>39</option>
                <option value=40>40</option>
                <option value=41>41</option>
                <option value=42>42</option>
                <option value=43>43</option>
                <option value=44>44</option>
                <option value=45>45</option>
                <option value=46>46</option>
                <option value=47>47</option>
                <option value=48>48</option>
                <option value=49>49</option>
                <option value=50>50</option>
                <option value=51>51</option>
                <option value=52>52</option>
                <option value=53>53</option>
                <option value=54>54</option>
                <option value=55>55</option>
                <option value=56>56</option>
                <option value=57>57</option>
                <option value=58>58</option>
                <option value=59>59</option>
            </select>
        </td>
        <td id="final-hour"  style="padding-right: 2.3cm;">
            <select name="final-hours" id="final-hours">
                <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>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
                <option value=11>11</option>
                <option value=12>12</option>
            </select>
        </td>
        <td id="final-minute"  style="padding-right: 2.3cm;">
            <select name="final-minutes" id="final-minutes">
                <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>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
                <option value=11>11</option>
                <option value=12>12</option>
                <option value=13>13</option>
                <option value=14>14</option>
                <option value=15>15</option>
                <option value=16>16</option>
                <option value=17>17</option>
                <option value=18>18</option>
                <option value=19>19</option>
                <option value=20>20</option>
                <option value=21>21</option>
                <option value=22>22</option>
                <option value=23>23</option>
                <option value=24>24</option>
                <option value=25>25</option>
                <option value=26>26</option>
                <option value=27>27</option>
                <option value=28>28</option>
                <option value=29>29</option>
                <option value=30>30</option>
                <option value=31>31</option>
                <option value=32>32</option>
                <option value=33>33</option>
                <option value=34>34</option>
                <option value=35>35</option>
                <option value=36>36</option>
                <option value=37>37</option>
                <option value=38>38</option>
                <option value=39>39</option>
                <option value=40>40</option>
                <option value=41>41</option>
                <option value=42>42</option>
                <option value=43>43</option>
                <option value=44>44</option>
                <option value=45>45</option>
                <option value=46>46</option>
                <option value=47>47</option>
                <option value=48>48</option>
                <option value=49>49</option>
                <option value=50>50</option>
                <option value=51>51</option>
                <option value=52>52</option>
                <option value=53>53</option>
                <option value=54>54</option>
                <option value=55>55</option>
                <option value=56>56</option>
                <option value=57>57</option>
                <option value=58>58</option>
                <option value=59>59</option>
            </select>
        </td>
        <td id="final-second"  style="padding-right: 2.3cm;">
            <select name="final-seconds" id="final-seconds">
                <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>
                <option value=6>6</option>
                <option value=7>7</option>
                <option value=8>8</option>
                <option value=9>9</option>
                <option value=10>10</option>
                <option value=11>11</option>
                <option value=12>12</option>
                <option value=13>13</option>
                <option value=14>14</option>
                <option value=15>15</option>
                <option value=16>16</option>
                <option value=17>17</option>
                <option value=18>18</option>
                <option value=19>19</option>
                <option value=20>20</option>
                <option value=21>21</option>
                <option value=22>22</option>
                <option value=23>23</option>
                <option value=24>24</option>
                <option value=25>25</option>
                <option value=26>26</option>
                <option value=27>27</option>
                <option value=28>28</option>
                <option value=29>29</option>
                <option value=30>30</option>
                <option value=31>31</option>
                <option value=32>32</option>
                <option value=33>33</option>
                <option value=34>34</option>
                <option value=35>35</option>
                <option value=36>36</option>
                <option value=37>37</option>
                <option value=38>38</option>
                <option value=39>39</option>
                <option value=40>40</option>
                <option value=41>41</option>
                <option value=42>42</option>
                <option value=43>43</option>
                <option value=44>44</option>
                <option value=45>45</option>
                <option value=46>46</option>
                <option value=47>47</option>
                <option value=48>48</option>
                <option value=49>49</option>
                <option value=50>50</option>
                <option value=51>51</option>
                <option value=52>52</option>
                <option value=53>53</option>
                <option value=54>54</option>
                <option value=55>55</option>
                <option value=56>56</option>
                <option value=57>57</option>
                <option value=58>58</option>
                <option value=59>59</option>
            </select> 
        </td>
        </tr>
        </table>
        <button type="button" class="button1" onclick=addRow()>Añadir Registro</button>
        <button type="button" class="button2" onClick=deleteRow()>Borrar Registro</button>
        <button type="button" class="button3" onClick=calculate()>CALCULAR</button>
    </body>
</html>
2
  • Vale me acabo de dar cuenta que lo que pedías era calcular todo de todas las tablas que creas...soy idiota. Ahora miro como hacerlo, porque caes en el error de añadir el mismo id a varios elementos.
    – AQMR
    Commented el 7 jul. 2021 a las 9:27
  • lo puedes hacer un .map en la misma tabla para recorrer los datos Commented el 16 sept. 2022 a las 20:09

1 respuesta 1

1

[EDIT]

Vale después de hacer un pequeño apaño, tuve que modificar un par de cosas para no alterar tu estructura y poder sacar el resultado que querías.

Tengo un par de consejos que darte antes de que veas la respuesta a tu problema:

  1. No uses el mismo id para nombrar varios elementos, para eso están las clases
  2. Siempre que haya una estructura repetitiva, trata de hacerlo con un bucle, te ahorrarás mucho tiempo, como es el caso de los option, tu hiciste en total 252 option a mano, con un bucle, solo haces uno.
  3. Para crear el mismo elemento varias veces, no uses una copia de otro elemento, crealo con document.createElement('tag');

Dicho esto, comienzo:

Lo primero de todo es ver cuántas tr tiene la table, para ello buscamos en el DOM el id de la table (time), y dentro de ella hacemos un querySelectorAll (mejor y mismo resultado con getElementsByClassName), eso nos devolverá un array de elementos, el cual es iterable, por tanto un forEach para tener todos los elementos individualmente en un bucle. Eso es la primera línea de la función createElement();

En el bucle forEach, definimos el item (le puedes poner el nombre que quieras, item, nombre, elemento...va a ser una forma de llamar rápidamente a ese elemento iterado), y el index (impepinable que se llame así).

Mandamos el index a setOptions, el cual verás que nos devuelve un Array con los elementos que queríamos obtener, absolutamente todos correctamente identificados y listos para ser trabajados.

Verás que en setOptions() hago un return de un array que se crea al momento, llamando a la función selector con varios parámetros dentro. Investiga un poco porque es sencillo de entender, al menos, eso creo yo.

Volvemos a la función calculate por donde la dejamos, en orden desdendente, y vemos que definí dos variables ocn valor 0, init y finn, los cuales sumo valores según dónde lo necesite.

Luego resto el valor final del inicial, lo divido entre 60 para que me de los minutos en vez de los segundos, y listo.

¿Problemas?

  • Mismo Id para varios elementos (arrastré a propósito tu error, pero lo puedes corregir fácilmente)
  • Si el valor inicial es mayor que el final, el resultado dará negativo (lo cual se podrías solucionar declarando una variable result, metiendo la operación dentro de esa variable, y hacer un if. if(result < 0){ result * -1) y ya estaría.

window.addEventListener('load', () => {
  let elm = setOptions(0);

  elm.forEach(item => {

    for (let i = 1; i <= item.ite; i++) {
      let mle = document.createElement('option');
      mle.setAttribute('value', i);
      mle.innerHTML = i;
      item.elm.append(mle);
    }

  });
});

function addRow() {
  var table = document.getElementById("time");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var cell4 = row.insertCell(3);
  var cell5 = row.insertCell(4);
  var cell6 = row.insertCell(5);
  cell1.innerHTML = document.getElementById("initial-hour").innerHTML;
  cell2.innerHTML = document.getElementById("initial-minute").innerHTML;
  cell3.innerHTML = document.getElementById("initial-second").innerHTML;
  cell4.innerHTML = document.getElementById("final-hour").innerHTML;
  cell5.innerHTML = document.getElementById("final-minute").innerHTML;
  cell6.innerHTML = document.getElementById("final-second").innerHTML;
}

function deleteRow() {
  var table = document.getElementById("time");
  var rowCount = table.rows.length;
  if (rowCount > 1) {
    table.deleteRow(rowCount - 1);
  }
}

function calculate() {
  document.getElementById('time').querySelectorAll('tr').forEach((item, index) => {
    let opt = setOptions(index);
    console.log(opt);
    let init = 0;
    let finn = 0;

    opt.forEach(item => {
      if (item.nam.includes('initial')) {
        init += item.sec;
      }

      if (item.nam.includes('final')) {
        finn += item.sec;
      }
    });

    console.log('X vez');
    console.log((finn - init) / 60);
  });
}

function setOptions(index) {
  return ary = [
    selector('#initial-hours', 3600, 12, index),
    selector('#initial-minutes', 60, 60, index),
    selector('#initial-seconds', 1, 60, index),
    selector('#final-hours', 3600, 12, index),
    selector('#final-minutes', 60, 60, index),
    selector('#final-seconds', 1, 60, index)
  ];
}

function selector(param, n, s, index) {
  return {
    nam: param,
    elm: document.querySelectorAll(param)[index],
    sec: document.querySelectorAll(param)[index].value * n,
    ite: s
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h2 class="initial">Tiempo Inicial</h2>
  <h2 class="final">Tiempo Final</h2>
  <h2 class="total">Total Tiempo [Minutos]</h2>
  <h2 class="result1" id="result1">0</h2>
  <h2 class="total-price">Costo Total</h2>
  <h2 class="result2" id="result2">$0</h2>
  <h2 class="price">Valor Minuto (COP)</h2>
  <input id="mount" class="price-bar" type="number" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" placeholder="$0.00" />
  <h3 class="init-hour">Hora(s)</h3>
  <h3 class="init-minute">Minuto(s)</h3>
  <h3 class="init-second">Segundo(s)</h3>
  <h3 class="f-hour">Hora(s)</h3>
  <h3 class="f-minute">Minuto(s)</h3>
  <h3 class="f-second">Segundo(s)</h3>

  <table class="table" id="time">
    <tr>
      <td id="initial-hour" style="padding-right: 2cm;">
        <select name="initial-hours" id="initial-hours">
        </select>
      </td>
      <td id="initial-minute" style="padding-right: 2.3cm;">
        <select name="initial-minutes" id="initial-minutes">
        </select>
      </td>
      <td id="initial-second" style="padding-right: 2.3cm;">
        <select name="initial-seconds" id="initial-seconds">
        </select>
      </td>
      <td id="final-hour" style="padding-right: 2.3cm;">
        <select name="final-hours" id="final-hours">
        </select>
      </td>
      <td id="final-minute" style="padding-right: 2.3cm;">
        <select name="final-minutes" id="final-minutes">
        </select>
      </td>
      <td id="final-second" style="padding-right: 2.3cm;">
        <select name="final-seconds" id="final-seconds">
        </select>
      </td>
    </tr>
  </table>
  <button type="button" class="button1" onclick=addRow()>Añadir Registro</button>
  <button type="button" class="button2" onClick=deleteRow()>Borrar Registro</button>
  <button type="button" class="button3" onClick=calculate()>CALCULAR</button>
</body>

</html>

2
  • Muchas gracias por tu respuesta, enserio que es muy completa y me ha ayudado a entender cuál era el error que tenía! Commented el 10 jul. 2021 a las 1:12
  • Para eso estamos ^^
    – AQMR
    Commented el 12 jul. 2021 a las 7:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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