1

Tengo una tabla con id=mytabla, la cual dentro lleva varios datos, y en la última fila un campo llamado retenciones que deberia mostrar otra tabla dentro, en esto no tengo inconvenientes, quedando asi:

<table id="mytabla" class="table table-sm table-striped">
    <tbody>
        <tr>
            <th id="#">#</th>
            <th id="Documento" class="tb-gra">Documento</th>
            <th id="Fecha">Fecha(emision)</th>
            <th id="retenciones">Retenciones</th>
        </tr>
        <tr>
            <td class="tb-neg">1</td>
            <td class="tb-gra">FACTURA</td>
            <td style="width:64pt">04/06/2018</td>
            <td>SIN RETENCION</td>
        </tr>
        <tr>
            <td class="tb-neg">1</td>
            <td class="tb-gra">FACTURA</td>
            <td style="width:64pt">04/06/2018</td>
            <td>SIN RETENCION</td>
        </tr>
        <tr>
            <td class="tb-neg">1</td>
            <td class="tb-gra">FACTURA</td>
            <td style="width:64pt">04/06/2018</td>
            <td>
                <table>
                    <tbody>
                        <tr>
                            <td>IVA</td>
                            <td>3</td>
                            <td>120.00</td>
                            <td>100.0</td>
                            <td>120.00</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

En JavaScript quiero seleccionar la tabla y contar las filas, pero tambien me cuenta las de la segunda tabla, como hago para que no cuente la segunda tabla o no la tome en cuenta, utilizo este código:

var table = document.getElementById("mytabla");
var fila=document.getElementById("mytabla").getElementsByTagName('tr');
var row=table.insertRow(parseInt(fila.length);
var cantidaddefilas=fila.length;

Pero me esta contando las de la segunda tabla, como hago para que no cuente esas.

2
  • prueba poniendole otro id a esa segunda tabla
    – srJJ
    el 25 jul. 2018 a las 20:57
  • ¿Por qué una tabla dentro de otra tabla? No es recomendable desde el punto de vista de las buenas prácticas. No es en vano que hay categorías de elementos y contenedores en HTML.
    – A. Cedano
    el 25 jul. 2018 a las 20:59

3 respuestas 3

1

Puedes obtenerlo mediante la propiedad rows de la tabla referenciada por su id.

var theTable = document.getElementById("mytabla");
var rowCount = theTable.rows.length;
console.log(rowCount);
<table id="mytabla" class="table table-sm table-striped">
            <tbody>
            <tr>
                <th id="#">#</th>
                <th id="Documento" class="tb-gra">Documento</th>
                <th id="Fecha">Fecha(emision)</th>
                <th id="retenciones">Retenciones</th>
            </tr>
            <tr>
                <td class="tb-neg">1</td>
                <td class="tb-gra">FACTURA</td>
                <td style="width:64pt">04/06/2018</td>
                <td>SIN RETENCION</td>
            </tr>
            <tr>
                <td class="tb-neg">1</td>
                <td class="tb-gra">FACTURA</td>
                <td style="width:64pt">04/06/2018</td>
                <td>SIN RETENCION</td>
            </tr>
            <tr>
                <td class="tb-neg">1</td>
                <td class="tb-gra">FACTURA</td>
                <td style="width:64pt">04/06/2018</td>
                <td>
                     <table><tbody>
                        <tr>
                            <td>IVA</td>
                            <td>3</td>
                            <td>120.00</td>
                            <td>100.0</td>
                            <td>120.00</td>
                       </tr>
                     </tbody></table>
                </td>
            </tr>
</tbody>
</table>

De todos modos, no es aconsejable tener una tabla dentro de otra tabla.

2
  • al final sugiere que no es aconsejable tener una tabla dentro de otra, que otra opcion podria utilizar?
    – jeanpitx
    el 25 jul. 2018 a las 22:24
  • 1
    @jeanpitx dos tablas independientes. Luego por reglas de estilo (css) puedes trabajar el código incluso para que se vean como si fuese la misma tabla. O, que sea la misma tabla, diferenciada por dos tbody. El problema aquí es que usas un elemento menor (un td) para contener un elemento superior (table)
    – A. Cedano
    el 25 jul. 2018 a las 22:40
0

Puedes agregar una clase a las tr internas o externas y usar jQuery para seleccionar. Te dejo un ejemplo:

var table = document.getElementById("mytabla");
var fila=$("#mytabla").find('tr:not(".inner")');
console.log(fila.length);
var row=table.insertRow(parseInt(fila.length));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytabla" class="table table-sm table-striped">
    <tbody>
        <tr>
            <th id="#">#</th>
            <th id="Documento" class="tb-gra">Documento</th>
            <th id="Fecha">Fecha(emision)</th>
            <th id="retenciones">Retenciones</th>
        </tr>
        <tr>
            <td class="tb-neg">1</td>
            <td class="tb-gra">FACTURA</td>
            <td style="width:64pt">04/06/2018</td>
            <td>SIN RETENCION</td>
        </tr>
        <tr>
            <td class="tb-neg">1</td>
            <td class="tb-gra">FACTURA</td>
            <td style="width:64pt">04/06/2018</td>
            <td>SIN RETENCION</td>
        </tr>
        <tr>
            <td class="tb-neg">1</td>
            <td class="tb-gra">FACTURA</td>
            <td style="width:64pt">04/06/2018</td>
            <td>
                <table>
                    <tbody>
                        <tr class="inner">
                            <td>IVA</td>
                            <td>3</td>
                            <td>120.00</td>
                            <td>100.0</td>
                            <td>120.00</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

0

Lo que se puede hacer es reemplazar la linea

var fila=document.getElementById("mytabla").getElementsByTagName('tr');

por lo siguiente:

var fila=document.querySelectorAll("#mytabla > tbody > tr");

esto efectivamente corrige el problema

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.