在另一个HTML表中处理表而不干扰JAVASCRIPT

时间：2018-07-25 20:56:58

标签： javascript html

我有一个带有id="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>

在javascript中，我想选择表并对行进行计数，同时还要告诉我第二个表的行，因为我这样做是为了使第二个表不计数或不考虑在内，因此我使用以下代码： 

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

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

4 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我不确定我是否理解问题。您要计算除内部表中的行以外的所有行吗？ 然后，代替

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

使用

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

此外，您无需parseInt(fila.length)。 Length属性是一个数字，所以fila.length就足够了。

答案 2 :(得分：0)

对于table，您实际上可以获取其rows属性https://www.w3schools.com/jsref/coll_table_rows.asp的长度

var cantidaddefilas = document.getElementById('mytabla').rows.length

答案 3 :(得分：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>

相关问题
最新问题