Handle table inside another HTML table without interfering with JAVASCRIPT

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


Handle table inside another HTML table without interfering with JAVASCRIPT



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, thus:


<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, as I do so that the second table does not count or do 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;



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





You forgot to translate the last line into english. I would edit it but I don't want to change the meaning of what you want.
– chevybow
28 mins ago




4 Answers
4



You should use a querySelector.


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>



In the case of a table, you can actually just get the length of its rows attribute https://www.w3schools.com/jsref/coll_table_rows.asp


table


rows


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



Im not sure that I understand question. You want to count all rows, except rows in inner table?
Then, instead of


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



use


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



Also, you don't need to parseInt(fila.length). Length property is a number, so fila.length is enough.


parseInt(fila.length)


fila.length



You can use querySelectorAll like in the example snippet below.


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>



OR you could use getElementsByClassName after changing your HTML a little. Check this example also.


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>



in case you don't want to count header row change your HTML by using a thead element.


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>






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
-

Popular posts from this blog

Keycloak server returning user_not_found error when user is already imported with LDAP

Keycloak server returning user_not_found error when user is already imported with LDAP I am currently running a keycloak server as a service in a kubernetes cluster. I can access it perfectly with the initial keycloak admin account and used it to setup a new realm using LDAP for User Federation. The connection and queries seem to work fine as a I can search for Users and they pop up with their correct username, first name, last name and e-mail so all seemed fine. When I then log out and try to log in with a normal user account that exists in the AD and has been imported I just find get the following error: WARN [org.keycloak.events] (default task-8) type=LOGIN_ERROR, realmId=master, clientId=security-admin-console, userId=null, ipAddress=<my ip>, error=user_not_found, auth_method=openid-connect, auth_type=code, redirect_uri=http://myserver.com/auth/admin/master/console/#/realms/MyRealm, code_id=a8ca7f06-dfec-4e6e-8f6b-74eb871f71da, username=myUser So it seems that in some way wh
Read more

PHP parse/syntax errors; and how to solve them?

Image
PHP parse/syntax errors; and how to solve them? Everyone runs into syntax errors. Even experienced programmers make typos. For newcomers it's just part of the learning process. However, it's often easy to interpret error messages such as: PHP Parse error: syntax error, unexpected '{' in index.php on line 20 The unexpected symbol isn't always the real culprit. But the line number gives a rough idea where to start looking. Always look at the code context . The syntax mistake often hides in the mentioned or in previous code lines . Compare your code against syntax examples from the manual. While not every case matches the other. Yet there are some general steps to solve syntax mistakes . This references summarized the common pitfalls: Unexpected T_STRING Unexpected T_VARIABLE Unexpected '$varname' (T_VARIABLE) Unexpected T_CONSTANT_ENCAPSED_STRING Unexpected T_ENCAPSED_AND_WHITESPACE Unexpected $end Unexpected T_FUNCTION… Unexpected { { Unexpected } } Unexpe
Read more

How to scale/resize CVPixelBufferRef in objective C, iOS

Image
Clash Royale CLAN TAG #URR8PPP How to scale/resize CVPixelBufferRef in objective C, iOS I am trying to resize an image from a CVPixelBufferRef to 299x299. Ideally is would also crop the image. The original pixelbuffer is 640x320, the goal is to scale/crop to 299x299 without loosing aspect ratio (crop to center). I found code to resize a UIImage in objective c, but none to resize a CVPixelBufferRef. I have found various very complicated examples of object C many different image types, but none specifically for resizing a CVPixelBufferRef. What is the easiest/best way to do this, please include the exact code. ... I tried the answer from selton, but this did not work as the resulting type in the scaled buffer is not correct (goes into assert code), OSType sourcePixelFormat = CVPixelBufferGetPixelFormatType(pixelBuffer); int doReverseChannels; if (kCVPixelFormatType_32ARGB == sourcePixelFormat) { doReverseChannels = 1; } else if (kCVPixelFormatType_32BGRA == sourcePixelFormat) {
Read more