0
    <table id="" class="table table-responsive-lg table-responsive-md table-responsive-sm table-responsive-xs table-hover table-outline mb-0">
   <tbody>
      <tr class="bg-dark">
         <th>
            <h4>Fecha</h4>
         </th>
         <th>
            <h4>Hora entrada</h4>
         </th>
         <th>
            <h4>Hora salida</h4>
         </th>
         <th>
            <h4>Descanso</h4>
         </th>
         <th>
            <h4>Horas laboradas</h4>
         </th>
         <th>
            <h4>Proyecto</h4>
         </th>
         <th>
            <h4>Observaciones</h4>
         </th>
      </tr>
   </tbody>
   <tbody>
      <tr style="cursor: pointer;">
         <td>2018-09-01</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-02</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-03</td>
         <td>05:30 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>11:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-04</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-05</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-06</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-07</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-08</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Sábado no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-09</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-10</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-11</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-12</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-13</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-14</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-15</td>
         <td>07:00 am</td>
         <td>01:00 pm</td>
         <td>00:00</td>
         <td>06:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-16</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-17</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-18</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-19</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-20</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-21</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-22</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Sábado no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-23</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-24</td>
         <td>07:00 am</td>
         <td>09:00 pm</td>
         <td>01:00</td>
         <td>13:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-25</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-26</td>
         <td>07:00 am</td>
         <td>07:00 pm</td>
         <td>01:00</td>
         <td>11:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-27</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-28</td>
         <td>07:00 am</td>
         <td>10:00 pm</td>
         <td>04:00</td>
         <td>11:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-29</td>
         <td>08:00 am</td>
         <td>11:30 am</td>
         <td>00:00</td>
         <td>03:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-30</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr>
         <td colspan="4">
            <h3>Total</h3>
         </td>
         <td colspan="3">
            <h3>221:30</h3>
         </td>
      </tr>
      <!---->
   </tbody>
</table>
4
  • @Ricardo ¿Cómo hizo usted para ordenar la tabla en bloques? el 2 nov. 2018 a las 22:04
  • ha que se refiere usted? el 2 nov. 2018 a las 22:21
  • Cuando yo publiqué esta pregunta el código de la tabla estaba todo desordenado y usted lo ordenó por bloques para hacerlo más legible, ¿cómo o hizo? el 2 nov. 2018 a las 22:30
  • No recuerdo muy bien amigo, pero fue en una herramienta para indentar código por ejemplo: Enlace el 2 nov. 2018 a las 22:44

1 respuesta 1

2

Puedes usar JQuery para hacer referencia a las cabeceras y registros de cada tabla, la siguiente función te puede ayudar:

var myRows = [];
var $headers = $("th h4");
var $rows = $("tbody tr").each(function(index) {
  $cells = $(this).find("td");
  myRows[index] = {};
  $cells.each(function(cellIndex) {
    myRows[index][$($headers[cellIndex]).html()] = $(this).html();
  });    
});

var myObj = {};
myObj.myrows = myRows;
console.log(JSON.stringify(myObj));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="" class="table table-responsive-lg table-responsive-md table-responsive-sm table-responsive-xs table-hover table-outline mb-0">
   <tbody>
      <tr class="bg-dark">
         <th>
            <h4>Fecha</h4>
         </th>
         <th>
            <h4>Hora entrada</h4>
         </th>
         <th>
            <h4>Hora salida</h4>
         </th>
         <th>
            <h4>Descanso</h4>
         </th>
         <th>
            <h4>Horas laboradas</h4>
         </th>
         <th>
            <h4>Proyecto</h4>
         </th>
         <th>
            <h4>Observaciones</h4>
         </th>
      </tr>
   </tbody>
   <tbody>
      <tr style="cursor: pointer;">
         <td>2018-09-01</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-02</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-03</td>
         <td>05:30 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>11:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-04</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-05</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-06</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-07</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-08</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Sábado no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-09</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-10</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-11</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-12</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-13</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-14</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-15</td>
         <td>07:00 am</td>
         <td>01:00 pm</td>
         <td>00:00</td>
         <td>06:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-16</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-17</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-18</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-19</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-20</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>00:30</td>
         <td>10:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-21</td>
         <td>07:00 am</td>
         <td>06:00 pm</td>
         <td>01:00</td>
         <td>10:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-22</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Sábado no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-23</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-24</td>
         <td>07:00 am</td>
         <td>09:00 pm</td>
         <td>01:00</td>
         <td>13:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-25</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-26</td>
         <td>07:00 am</td>
         <td>07:00 pm</td>
         <td>01:00</td>
         <td>11:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-27</td>
         <td>07:00 am</td>
         <td>05:00 pm</td>
         <td>01:00</td>
         <td>09:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-28</td>
         <td>07:00 am</td>
         <td>10:00 pm</td>
         <td>04:00</td>
         <td>11:00</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-29</td>
         <td>08:00 am</td>
         <td>11:30 am</td>
         <td>00:00</td>
         <td>03:30</td>
         <td>Contrato 343/2017</td>
         <td>Sin obsevación</td>
      </tr>
      <tr style="cursor: pointer;">
         <td>2018-09-30</td>
         <td>12:00 am</td>
         <td>12:00 am</td>
         <td>00:00</td>
         <td>00:00</td>
         <td>Contrato 343/2017</td>
         <td>Dominical no laborado</td>
      </tr>
      <tr>
         <td colspan="4">
            <h4>Total</h4>
         </td>
         <td colspan="3">
            <h4>221:30</h4>
         </td>
      </tr>
      <!---->
   </tbody>
</table>

Espero te ayude. Saludos.

4
  • Gracias muy buena esa función. Me gustaría saber por que o para que le coloca el signo $ a las variables como si fuese PHP. el 30 oct. 2018 a las 19:35
  • 1
    Es JQuery, en este ejemplo se usó para hacer referencias a las partes de la tabla, puedes leer un poco su documentación y te será de mucha utilidad. el 30 oct. 2018 a las 19:43
  • 2
    myRows[index][$($headers[cellIndex]).text()] = $(this).tex(); para eliminar las filas que tengan contendios h4 como en total!
    – Bryro
    el 30 oct. 2018 a las 19:54
  • Muchas gracias para lo que yo busco me sobran las últimas lineas, pero esta buena es función. el 30 oct. 2018 a las 20:01

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.