<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>
-
@Ricardo ¿Cómo hizo usted para ordenar la tabla en bloques?– Darwin ZamoraCommented el 2 nov. 2018 a las 22:04
-
ha que se refiere usted?– Ricardo PérezCommented 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?– Darwin ZamoraCommented 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– Ricardo PérezCommented el 2 nov. 2018 a las 22:44
Añade un comentario
|
1 respuesta
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.
-
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. Commented el 30 oct. 2018 a las 19:35
-
1Es 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. Commented el 30 oct. 2018 a las 19:43
-
2myRows[index][$($headers[cellIndex]).text()] = $(this).tex(); para eliminar las filas que tengan contendios h4 como en total!– BryroCommented 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. Commented el 30 oct. 2018 a las 20:01