Fixed slideToggle in table row inside another slideToggle (Jquery) - javascript

I have a problem when I try to use slideToggle inside another slideToggle in a table row with jQuery.
It works, but when I close the child slideToggle, it starts to appear in a parent slideToggle.
Here's an example to understand.
Open the first slideToggle
Close the 3 slideToggle that just appear
Close the first slideToggle
And look: The 3 closed slideToggles appear here?
I really need your help...!
Code from example here:
$(document).ready(function() {
$('.header1').nextUntil('.header1').slideToggle(100, function(){
});
$('.rowClic1').click(function(){
$(this).parent().nextUntil('tr.header1').slideToggle(100, function(){
});
});
$('.rowClic2').click(function(){
$(this).parent().nextUntil('tr.header2').slideToggle(100, function(){
});
});
});
.tH {
background-color : #fbc112;
}
.tB {
background-color : #976eb3;
}
.tC {
background-color : #c7d6de;
}
.tD {
background-color : #96a4ac;
}
.rowClic1, .rowClic2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="tH">
<th>HEAD A</th>
<th>HEAD B</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to open first Row </td>
<td></td>
</tr>
<!-- 1.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.2 -->
<tr class="tC header2">
<td class="rowClic2"> Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.3 -->
<tr class="tD header2">
<td class="rowClic2">CClic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
</tbody>
</table>


Just make sure that after you .slideToggle() the parent, .hide() all of the children in the callback of the parent .slideToggle():
$(document).ready(function() {
$('.header1').nextUntil('.header1').slideToggle(100);
$('.rowClic1').click(function(){
//This is what we're going to toggle:
var togglable = $(this).parent().nextUntil('tr.header1');
//Toggle togglable:
togglable.slideToggle(100, function() {
//Close all of the child slideToggles after toggling the parent:
$(".rowClic2").each(function() {
$(this).parent().nextUntil('tr.header2').hide();
});
});
});
$('.rowClic2').click(function(){
$(this).parent().nextUntil('tr.header2').slideToggle(100);
});
});
.tH {
background-color : #fbc112;
}
.tB {
background-color : #976eb3;
}
.tC {
background-color : #c7d6de;
}
.tD {
background-color : #96a4ac;
}
.rowClic1, .rowClic2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="tH">
<th>HEAD A</th>
<th>HEAD B</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to open first Row </td>
<td></td>
</tr>
<!-- 1.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.2 -->
<tr class="tC header2">
<td class="rowClic2"> Clic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
<!-- 1.3 -->
<tr class="tD header2">
<td class="rowClic2">CClic here to close/open second Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>stay open in header1 when header2 is close :( </td>
</tr>
</tbody>
</table>


So after a big help from Noble Mushtak, I found the solution.
SOLUTION:
It was just my selector. It was wrong because when I toggle parents, they also toggle children and vice versa : $(this).parent().nextUntil(...
So I made multiple <tbody>s in my table. Parent toggle the <tbody>s and children continue to toggles rows.
Sorry about my English and the fixed code is here.
Thanks again for your time, Noble Mushtak!!
The code:
$(document).ready(function() {
/* Close all toggle */
$('.header2').nextUntil('.header2').slideToggle(100);
$('.bdBody').slideToggle(100);
$('.rowClic1').click(function(){
$(this).parent().parent().next('.bdBody').slideToggle(100);
});
$('.rowClic2').click(function(){
$(this).parent().nextUntil('tr.header2').slideToggle(100);
});
});
.tH {
background-color : #fbc112;
}
.tB {
background-color : #976eb3;
}
.tC {
background-color : #c7d6de;
}
.tD {
background-color : #96a4ac;
}
.rowClic1, .rowClic2 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr class="tH">
<th>HEAD A</th>
<th>HEAD B</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to close/open first Row</td>
<td></td>
</tr>
</tbody>
<tbody class="bdBody">
<!-- 1.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row </td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<!-- 1.2 -->
<tr class="tC header2">
<td class="rowClic2"> Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<!-- 1.3 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
</tbody>
<tbody>
<!-- 2 -->
<tr class="tB header1">
<td class=" rowClic1">Clic here to open first Row </td>
<td></td>
</tr>
</tbody>
<tbody class="bdBody">
<!-- 2.1 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<!-- 2.2 -->
<tr class="tC header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<!-- 2.3 -->
<tr class="tD header2">
<td class="rowClic2">Clic here to open children Row</td>
<td></td>
</tr>
<tr class="tD">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
<tr class="tC">
<td></td>
<td>data</td>
</tr>
</tbody>
</table>

Related

how can i collapse all table rows

i have table rows inside a table, and also another nested table rows inside each row, my problem is i can collapse and expand in the nested table rows, but when i try to expand in the main table, only the first row is expanded the rest ones are expanded by default when i launch the program, how can i fix it.
this is my code
tbody.collapse.in {
display: table-row-group;
}
.tigray {
background-color: darkcyan;
}
.zoba {
background-color: forestgreen;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</tr>
</tbody>
</table>

You can not use tbody inside another tbody
it is not legal HTML.
Follow this code ↓↓
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th></th>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target=".group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td class="tigray">title1</td>
<td class="tigray">35</td>
<td class="tigray">35</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td class="zoba">nested 1</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td>nested title1</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title2</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 3</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
<tbody id="" class="collapse group-of-rows-1">
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-3" aria-expanded="false" aria-controls="group-of-rows-3">
<td class="zoba">nested 2</td>
<td class="zoba">29</td>
<td class="zoba">29</td>
</tr>
</tbody>
<tbody id="group-of-rows-3" class="collapse">
<tr class="table-warning">
<td>nested title4</td>
<td>13</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title5</td>
<td>18</td>
<td>13</td>
</tr>
<tr class="table-warning">
<td>nested title 6</td>
<td>32</td>
<td>13</td>
</tr>
</tbody>
</table>
However, you are allowed to have multiple TBODY elements in a single TABLE element, so you could do this:
<table>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody >
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>

How to hide the specific tr:nth-child(6) based on the content of a tr:nth-child(7) > td:nth-child(2)

I would like to hide with javascript a specific child :
#table-detail > tbody > tr:nth-child(10)
based on the content of another specific preceding child :
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)
I can hide the child as followed :
$('#table-detail > tbody > tr:nth-child(10)').css('display', 'none');
but I have no clue how to check the content of the preceding child (if child element
#table-detail > tbody > tr:nth-child(7) > td:nth-child(2)" content == 'Tarte-fine
then hide child element X.
Please find hereafter the table :
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <-CONTENT TO CHECK IN THIS CHILD ELEMENT
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <- CHILD ELEMENT TO HIDE
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>

You need to use :contains() selector that select element has special text content.
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('display', 'none');
Also you can simplify the code and use :eq() selector instead of :nth-child
$('#table-detail tr:eq(6) td:eq(1):contains("Tarte-fine")').css('display', 'none');
$('#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains("Tarte-fine")').css('color', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td> <!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr> <!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>
Note that :contain() return unwanted result in some case, so you can use .filter() instead
$('#table-detail tr:eq(6) td:eq(1)').filter(function(){
return $(this).text() == "Tarte-fine";
}).css('display', 'none');

You could check if that cell contains the specific text using :contains and hide that other cell using hide():
$(function() {
var found = $("#table-detail > tbody > tr:nth-child(7) > td:nth-child(2):contains(Tarte-fine)").length > 0;
if (found) {
$("#table-detail > tbody > tr:nth-child(10)").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table-detail" class="table table-striped">
<tbody>
<tr>
<td># Commande</td>
<td>26</td>
</tr>
<tr>
<td>Statut Commande</td>
<td>Non traitée</td>
</tr>
<tr>
<td>Statut Laboratoire</td>
<td>Assignée</td>
</tr>
<tr>
<td>Nom</td>
<td>Client Deux</td>
</tr>
<tr>
<td>Nature</td>
<td>Client Mage</td>
</tr>
<tr>
<td>Date Retrait</td>
<td></td>
</tr>
<tr>
<td>Catégorie</td>
<td>Tarte-fine</td>
<!-- CONTENT TO CHECK IN THIS CHILD ELEMENT -->
</tr>
<tr>
<td>Produit</td>
<td>Abricots</td>
</tr>
<tr>
<td># Personnes</td>
<td>10</td>
</tr>
<tr>
<!-- CHILD ELEMENT TO HIDE -->
<td>Taille (cm)</td>
<td>16</td>
</tr>
<tr>
<td>Inscription</td>
<td></td>
</tr>
<tr>
<td>Décoration petites fleurs</td>
<td>undefined</td>
</tr>
<tr>
<td>Décoration Chocolat et fruits</td>
<td>undefined</td>
</tr>
<tr>
<td>Nombre de sandwiches</td>
<td></td>
</tr>
<tr>
<td>Poids</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 1</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 2</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 3</td>
<td></td>
</tr>
<tr>
<td>Sandwiches 4</td>
<td></td>
</tr>
<tr>
<td>Couleur du ruban</td>
<td></td>
</tr>
<tr>
<td>Prix</td>
<td>58</td>
</tr>
<tr>
<td>Total</td>
<td>0</td>
</tr>
</tbody>
</table>

As an alternative this is the code to do what you need without using jquery.
This is by the way a more solid solution since you don't need to know the numerical order of both of the rows that contain the cell you want to check and the cell you want to hide.
const rows = document.getElementsByTagName('tr');
let textToCheck = 'Tarte-fine';
let childTextOfTheElementToHide = 'Taille (cm)';
let check = Object.keys(rows).filter(key => {
return rows[key].children[1].innerHTML === textToCheck
});
if(check.length > 0){
let hide = Object.keys(rows).filter(key => {
return rows[key].children[0].innerHTML === childTextOfTheElementToHide
});
rows[hide].style.display = 'none';
}

Javascript function executed before previous function is done

I have a webpage that contains a couple of tables.
At the beginning it checks the language and sets the corresponding translations.
At the end of the html file (after all the elements are loaded) the translations are set using javascript.
After that variables are requested via wifi.
This is what I see when I load the page.
The elements that don't need translation are shown before set_language_for_raw_data_() is executed.
I have checked Chrome's developer tools and saw this.
It shows that set_language_for_raw_data_() is executed before Raw_Data_Requests(), but it does not show until Raw_Data_Requests() is done.
Is there a way to show the translations before Raw_Data_Requests() is executed?
Raw_data.html:
<!DOCTYPE HTML>
<html>
<head>
<script>
checkLanguage(); //load language setting or use system default
</script>
</head>
<body>
<div id="site_unresponsive">
<div id="inhalt">
<h2 class="middle white_font expander" onclick="expander('raw_data')" id="raw_data_title"></h2>
<ul class="hidden" id="raw_data">
<table cellspacing="0" id="actual_meas">
<tr>
<td id="loading" style="display:none">Error: Connection lost</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(0)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(1)">..</td>
</tr>
<tr class="odd">
<td>Ubat</td>
<td id="Meas(2)">..</td>
</tr>
<tr>
<td>Ibat</td>
<td id="Meas(5)">..</td>
</tr>
<tr class="odd">
<td>U PWM</td>
<td id="Meas(9)">..</td>
</tr>
<tr>
<td style="color:darkorange">LED</td>
<td id="Meas(11)">•</td>
</tr>
<tr class="odd">
<td style="color:green">LED</td>
<td id="Meas(12)">•</td>
</tr>
<tr>
<td></td>
<td id="Meas(19)">..</td>
</tr>
<tr class="odd">
<td></td>
<td id="Meas(20)">..</td>
</tr>
<tr>
<td></td>
<td id="Meas(100)">..</td>
</tr>
</table>
</ul>
<h2 class="middle white_font expander" onclick="expander('version')" id="version_title"></h2>
<div class="hidden" id="version">
<table cellspacing="0" class="data_tab" id="version_details">
<tr>
<th></th>
</tr>
<tr class="odd">
<td id="device_version">~DeviceVersion~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cumulatives')" id="cumulatives_title"></h2>
<ul class="hidden" id="cumulatives">
<li class="w300">
<table cellspacing="0" id="cuml">
<tr class="odd">
<td></td>
<td>~Cumulatives(0)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(1)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(2)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(3)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(4)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(5)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(6)~</td>
</tr>
<tr>
<td></td>
<td>~Cumulatives(7)~</td>
</tr>
<tr class="odd">
<td></td>
<td>~Cumulatives(8)~</td>
</tr>
<tr>
<td></td>
<td style="white-space:nowrap;">~Cumulatives(14)~</td>
</tr>
</table>
</li>
</ul>
<h2 class="middle white_font expander" onclick="expander('error')" id="error_title"></h2>
<div class="hidden" id="error" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="error_history">
<tr>
<th>Nr</th>
<th></th>
<th></th>
<th></th>
<th>U</th>
<th>I</th>
<th>PWM</th>
<th>T</th>
</tr>
<tr class="odd">
<td>1</td>
<td>~ErrorHistory(0,2,0)~</td>
<td>~ErrorHistory(0,3,0)~</td>
<td>~ErrorHistory(0,4,0)~</td>
<td>~ErrorHistory(0,5,0)~</td>
<td>~ErrorHistory(0,6,0)~</td>
<td>~ErrorHistory(0,7,0)~</td>
<td>~ErrorHistory(0,8,0)~</td>
</tr>
<tr>
<td>2</td>
<td>~ErrorHistory(1,2,0)~</td>
<td>~ErrorHistory(1,3,0)~</td>
<td>~ErrorHistory(1,4,0)~</td>
<td>~ErrorHistory(1,5,0)~</td>
<td>~ErrorHistory(1,6,0)~</td>
<td>~ErrorHistory(1,7,0)~</td>
<td>~ErrorHistory(1,8,0)~</td>
</tr>
<tr class="odd">
<td>3</td>
<td>~ErrorHistory(2,2,0)~</td>
<td>~ErrorHistory(2,3,0)~</td>
<td>~ErrorHistory(2,4,0)~</td>
<td>~ErrorHistory(2,5,0)~</td>
<td>~ErrorHistory(2,6,0)~</td>
<td>~ErrorHistory(2,7,0)~</td>
<td>~ErrorHistory(2,8,0)~</td>
</tr>
<tr>
<td>4</td>
<td>~ErrorHistory(3,2,0)~</td>
<td>~ErrorHistory(3,3,0)~</td>
<td>~ErrorHistory(3,4,0)~</td>
<td>~ErrorHistory(3,5,0)~</td>
<td>~ErrorHistory(3,6,0)~</td>
<td>~ErrorHistory(3,7,0)~</td>
<td>~ErrorHistory(3,8,0)~</td>
</tr>
<tr class="odd">
<td>5</td>
<td>~ErrorHistory(4,2,0)~</td>
<td>~ErrorHistory(4,3,0)~</td>
<td>~ErrorHistory(4,4,0)~</td>
<td>~ErrorHistory(4,5,0)~</td>
<td>~ErrorHistory(4,6,0)~</td>
<td>~ErrorHistory(4,7,0)~</td>
<td>~ErrorHistory(4,8,0)~</td>
</tr>
<tr>
<td>6</td>
<td>~ErrorHistory(5,2,0)~</td>
<td>~ErrorHistory(5,3,0)~</td>
<td>~ErrorHistory(5,4,0)~</td>
<td>~ErrorHistory(5,5,0)~</td>
<td>~ErrorHistory(5,6,0)~</td>
<td>~ErrorHistory(5,7,0)~</td>
<td>~ErrorHistory(5,8,0)~</td>
</tr>
<tr class="odd">
<td>7</td>
<td>~ErrorHistory(6,2,0)~</td>
<td>~ErrorHistory(6,3,0)~</td>
<td>~ErrorHistory(6,4,0)~</td>
<td>~ErrorHistory(6,5,0)~</td>
<td>~ErrorHistory(6,6,0)~</td>
<td>~ErrorHistory(6,7,0)~</td>
<td>~ErrorHistory(6,8,0)~</td>
</tr>
<tr>
<td>8</td>
<td>~ErrorHistory(7,2,0)~</td>
<td>~ErrorHistory(7,3,0)~</td>
<td>~ErrorHistory(7,4,0)~</td>
<td>~ErrorHistory(7,5,0)~</td>
<td>~ErrorHistory(7,6,0)~</td>
<td>~ErrorHistory(7,7,0)~</td>
<td>~ErrorHistory(7,8,0)~</td>
</tr>
<tr class="odd">
<td>9</td>
<td>~ErrorHistory(8,2,0)~</td>
<td>~ErrorHistory(8,3,0)~</td>
<td>~ErrorHistory(8,4,0)~</td>
<td>~ErrorHistory(8,5,0)~</td>
<td>~ErrorHistory(8,6,0)~</td>
<td>~ErrorHistory(8,7,0)~</td>
<td>~ErrorHistory(8,8,0)~</td>
</tr>
<tr>
<td>10</td>
<td>~ErrorHistory(9,2,0)~</td>
<td>~ErrorHistory(9,3,0)~</td>
<td>~ErrorHistory(9,4,0)~</td>
<td>~ErrorHistory(9,5,0)~</td>
<td>~ErrorHistory(9,6,0)~</td>
<td>~ErrorHistory(9,7,0)~</td>
<td>~ErrorHistory(9,8,0)~</td>
</tr>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('cycle')" id="cycle_title"></h2>
<div class="hidden" id="cycle" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="cycle_history" style="layout:fixed">
<tr>
<th>Nr</th>
<th>Ah</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tbody id="extended_cycles">
</tbody>
</table>
</div>
<h2 class="middle white_font expander" onclick="expander('error_tab')" id="error_tab_title">EEPROM data</h2>
<div class="hidden" id="error_tab" style="overflow-x:scroll;overflow-y:hidden;white-space:nowrap;">
<table cellspacing="0" class="data_tab" id="eeprom_data">
<tr>
<td>00: ~EEPROM(0)~</td>
</tr>
<tr>
<td>10: ~EEPROM(1)~</td>
</tr>
<tr>
<td>20: ~EEPROM(2)~</td>
</tr>
<tr>
<td>30: ~EEPROM(3)~</td>
</tr>
<tr>
<td>40: ~EEPROM(4)~</td>
</tr>
<tr>
<td>50: ~EEPROM(5)~</td>
</tr>
<tr>
<td>60: ~EEPROM(6)~</td>
</tr>
<tr>
<td>70: ~EEPROM(7)~</td>
</tr>
<tr>
<td>80: ~EEPROM(8)~</td>
</tr>
<tr>
<td>90: ~EEPROM(9)~</td>
</tr>
<tr>
<td>A0: ~EEPROM(10)~</td>
</tr>
<tr>
<td>B0: ~EEPROM(11)~</td>
</tr>
<tr>
<td>C0: ~EEPROM(12)~</td>
</tr>
<tr>
<td>D0: ~EEPROM(13)~</td>
</tr>
<tr>
<td>E0: ~EEPROM(14)~</td>
</tr>
<tr>
<td>F0: ~EEPROM(15)~</td>
</tr>
</table>
</div>
<br>
</div>
<script>
set_language_for_raw_data_();
Raw_Data_Requests();
</script>
</div>
</body>
</html>
set_language_for_raw_data_():
document.getElementById("menu_title").innerHTML = d12;
document.getElementById("raw_data_title").innerHTML = t5;
document.getElementById("version_title").innerHTML = t7;
document.getElementById("cumulatives_title").innerHTML = t8;
document.getElementById("error_title").innerHTML = t9;
document.getElementById("cycle_title").innerHTML = t11;
checkLanguage():
language = getCookie("language");
if (language == "")
applySystemLanguage();
setTranslations(language);
setTranslations(language):
switch (language){
default:
case "en":
d12="Show RAW data";
t5="Real time measurements";
t7="Version";
t8="Cumulatives";
t9="Error history";
t11="Cycle history";
break;
}

With rxjs you can do someting like
set_language_for_raw_data_(){
//Your code
return Observable.of(language );
}
set_language_for_raw_data_().subscribe(() => Raw_Data_Requests());
Here, you wait until the set_language_for_raw_data_ returns an observable. You can then subscribe on it. From the moment the observable is completed, it will call the next function.
The complete explanation you can find on http://reactivex.io/, But take some time and check how Observables are working

What I did to make the translations show was add a timeout:
set_language_for_raw_data_();
setTimeout(function(){
Raw_Data_Requests();
}, 20);
Apparently this was enough time for the html to be shown/updated.

Using JQuery to select all <tr> elements with a specific class

The basic structure is a table with a few rows. I would like the top half of the table showing and the bottom half collapsed until a user clicks on the READ MORE cell. I have that functionality working but I can't get the JQuery right that selects all of the ".collapseThis" rows and hides them on page load.
Here is the table
<div id="tables">
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
</div>
Here is the JQuery.
$(document).ready(function () {
function getCollapsable($row) {
var children = [];
while ($row.next().hasClass('collapseThis')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
function hideTableRows($row) {
children = getCollapsable($row);
$.each(children, function () {
$(this).toggle();
});
}
$('#tables').each($('expandableTable'), function () {
hideTableRows($(this).children().hasClass('.accordion'));
});

You can just use css to set the display value, there is no need to use jQuery to set the initial state.
If you want to use jQuery, use a simple selector like $('#tables .expandableTable .collapseThis').hide().
$(document).ready(function() {
//if you don't want to use css
//$('#tables .expandableTable .collapseThis').hide();
});
#tables .expandableTable .collapseThis {
display: none;
}
<div id="tables">
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</div>

Alternating row colors in a sortable table

I'm using a table sorter to 'order' my tables on the client side. However - when I change an order, my row colors get messed up.
does anyone have a solution?
(js file below if you want to 'try it')
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title></title>
<script type="text/javascript" src="js/sorttable.js"></script>
<style type="text/css">
table.sortable thead { background-color:#DF7C1B; color:#ffffff; font-weight:bold; font-size:12px;}
.datatable-evenrow { background-color:#FFC68F;}
.datatable-rowhighlight { background-color: #8E9DBE; }
.datatable-labelrow { background-color:#EF943B; }
</style>
</head>
<body>
<table class="sortable" >
<thead>
<tr class="datatable-labelrow" >
<td class="">NAME</td>
<td class="">CODE</td>
<td class="">ADDRESS</td>
<td class="">CITY</td>
<td class="">STATE</td>
<td class="">ZIP</td>
<td class="">PHONE</td>
<td class="">FAX</td>
</tr>
</thead>
<tbody>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>EC, INC</td>
<td>234567</td>
<td>222 street</td>
<td>ELMHURST</td>
<td>IL</td>
<td>60000</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>EC, INC</td>
<td>4322234</td>
<td>702 road</td>
<td>ELMHURST</td>
<td>IL</td>
<td>60000</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>AAA AMERICA, INC</td>
<td>1111112222222</td>
<td>1458 avenue Ave</td>
<td>ITASCA</td>
<td>IL</td>
<td>60143</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>Likeme & likeme P.C.</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>00000</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>OFFICE STUFF, INC.</td>
<td>3333444</td>
<td>55555 Fifth Ave</td>
<td>NY</td>
<td>NY</td>
<td>02020</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>RepServe Inc.</td>
<td>54321</td>
<td>P.O. Box 3099</td></td>
<td>Heresville</td>
<td>HR</td>
<td>44000</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>SCHNEIDER'S SCHNOUSERS INC.</td>
<td>654543</td>
<td>3101 S. PACKERLAND DR. P.</td>
<td>Dog Town</td>
<td>Delaware</td>
<td>000077</td>
<td>Dan D. Dog</td>
<td>800-600-3366</td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>SIMPLE DISTRIBUTORS, LLC</td>
<td>444</td>
<td>235255 Drive Way</td>
<td>CHICAGO</td>
<td>IL</td>
<td>60606</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>SIMPLE DISTRIBUTORS, LLC</td>
<td>1234 </td>
<td>xxxoooo</td>
<td>DETROIT</td>
<td>MI</td>
<td>40606</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>AAA ,INC.</td>
<td>83300</td>
<td>OFFICEITEMS.COM</td>
<td>SOUTH ELGIN</td>
<td>IL</td>
<td>60177</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>BBB,INC.</td>
<td>156302</td>
<td>BBB.COM</td>
<td>SOUTH ELGIN</td>
<td>IL</td>
<td>60177</td>
<td></td>
<td></td>
</tr>
<tr class="datatable-evenrow" onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className='datatable-evenrow'" >
<td>CCC, INC</td>
<td>305792</td>
<td>333 ELKHART RD.</td>
<td>GOSH</td>
<td>SD</td>
<td>76526</td>
<td></td>
<td></td>
</tr>
<tr onMouseOver="this.className='datatable-rowhighlight'" onMouseOut="this.className=''" >
<td>CCC</td>
<td></td>
<td>UPRIGHT</td>
<td>P.O. BOX 228</td>
<td>FL</td>
<td>00000</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="datatable-footerrow">
<td colspan="10" class="datatable-footercell">Showing 1-x of x Records </td>
</tr>
</tfoot>
</table>
</body>
</html>
For sorttable.js see http://www.kryogenix.org/code/browser/sorttable/

I don't see the JS file, but you should definitely consider the jQuery tablesorter plug-in. It's lightweight, performs fast on the client, and handles all your zebra-striping/custom css with sorting. It also works with a pager add-in.

Don't even worry about class names or anything. Just do this in your css:
table.sortable tbody tr:nth-child(even) td {
background-color: #FFC68F;
}

After the sort you need to re-assign the class names for the rows.

Categories