在不干扰JAVASCRIPT的情况下处理另一个HTML表中的表

问题描述 投票：0回答：4

我有一个id="mytabla"表，里面包含几个数据，在最后一行中有一个名为retentions的字段，应该在里面显示另一个表，在这里我没有问题，因此：

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

在javascript我想选择表并计算行，但也告诉我第二个表的那些，因为我这样做，第二个表不计数或不考虑它，我使用此代码：

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

但是他告诉我第二张桌子的那些，就像我这样做，他不计算那些。

javascript html
4个回答
0
投票

您可以在下面的示例代码段中使用querySelectorAll。

var fila=document.querySelectorAll("#mytabla > tbody > tr");
alert('Number of rows: '+fila.length);
<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>

或者你可以在改变你的getElementsByClassName之后使用HTML。也请检查此示例。

var fila = document.getElementsByClassName('mytabla');
alert('Number of rows: '+fila.length);
<table id="mytabla" class="table table-sm table-striped">
            <tbody>
            <tr class="mytabla">
                <th id="#">#</th>
                <th id="Documento" class="tb-gra">Documento</th>
                <th id="Fecha">Fecha(emision)</th>
                <th id="retenciones">Retenciones</th>
            </tr>
            <tr class="mytabla">
                <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 class="mytabla">
                <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 class="mytabla">
                <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>

如果您不想计算标题行，请使用HTML元素更改您的thead。

var fila=document.querySelectorAll("#mytabla > tbody > tr");
alert('Number of rows: '+fila.length);
<table id="mytabla" class="table table-sm table-striped">
            <thead>
            <tr>
                <th id="#">#</th>
                <th id="Documento" class="tb-gra">Documento</th>
                <th id="Fecha">Fecha(emision)</th>
                <th id="retenciones">Retenciones</th>
            </tr>
            </thead>
            <tbody>
            <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>
0
投票

你应该使用querySelector。

document.querySelectorAll('#mytabla > tbody > tr');//selects all table rows whose parent is a tbody that is a child of #mytabla


<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>
<script>
console.log(document.querySelectorAll('#mytabla > tbody > tr').length);
</script>
0
投票

在qazxsw poi的情况下，你实际上可以得到它的qazxsw poi属性qazxsw poi的长度

table
0
投票

我不确定我理解问题。你想计算所有行，除了内表中的行？然后，而不是

rows

使用

https://www.w3schools.com/jsref/coll_table_rows.asp

此外，你不需要var cantidaddefilas = document.getElementById('mytabla').rows.length 。长度属性是一个数字，所以var fila=document.getElementById("mytabla").getElementsByTagName('tr'); 就足够了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.