Handle table inside another html table without interfering in JavaScript

Question

Handle table inside another html table without interfering in JavaScript

Navigation

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

0

I have a table with id=mytabla , which inside contains several data, and in the last row a field called retentions that should show another table inside, in this I have no problems, staying like this:

<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>

In JavaScript I want to select the table and count the rows, but also tell me those of the second table, how do I not count the second table or not take it into account, I use this code :

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

But he is telling me those of the second table, how do I not count those.

javascript jquery html

asked by jeanpitx 25.07.2018 в 22:53

source

3 answers

Custom Authentication in Web API 2 with OWIN How to search in JQGRID?

score 0 · Answer 1

You can get it using the property rows of the table referenced by its 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>

Anyway, it is not advisable to have a table inside another table.

score 0 · Answer 2

You can add a class to internal or external tr and use jQuery to select. Here is an example:

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>

score 0 · Answer 3

What you can do is replace the line

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

for the following:

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

this effectively corrects the problem