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

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>

Related

How to make nested tree table using sortable js?

Info: I want to make nested draggable table using sortable js. This is like a tree table.
The .detail-view tr is a child of previous tr or which have Parent data. I want If user Drag the parent tr the child(.detail-view) also dragged along with it. each parent tr have there separate zone with there child table.
The childs are not shared able with other childs or parents.
https://jsfiddle.net/47r95hbs/
<table class="table" id="mytable">
<thead>
<tr>
<th>Sortable Table</th>
</tr>
</thead>
<tbody id="ptable">
<tr>
<td>Parent subject 1</td>
</tr>
<tr class="detail-view" data-subject="1">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 1 child</td>
</tr>
<tr data-id="2">
<td>Subject 1 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 2</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 2 child</td>
</tr>
<tr data-id="2">
<td>Subject 2 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 3</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 3 child</td>
</tr>
<tr data-id="2">
<td>Subject 3 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

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.

Collapsible Table Rows with jQuery

i am looking for a way to make table rows collasible or expandable in multiple levels.
The default view should be collapsed (maybe its possible to show level 0 and 1?)
This is what i have right now, gathered from an answer on another question on here.
<table>
<tr class="header">
<th>A</th>
<th>B</th>
</tr>
<tr class="level_0" id="10">
<td>10</td>
<td> Level 0</td>
</tr>
<tr class="level_1 parent_10" id="11">
<td>10.1</td>
<td>Level 1</td>
</tr>
<tr class="level_1 parent_10" id="12">
<td >10.2</td>
<td>Level 1</td>
</tr>
<tr class="level_2 parent_12" id="13">
<td>10.2.1</td>
<td>Level 2</td>
</tr>
<tr class="level_0" id="20">
<td>20</td>
<td> Level 0</td>
</tr>
<tr class="level_1 parent_20" id="21">
<td>20.1</td>
<td>Level 1</td>
</tr>
</table>
JavaScript:
if (typeof jQuery === 'undefined') throw "jQuery Required";
jQuery(function ($) {
var treeTable = {
parentClassPrefix : '',
collapsedClass : 'collapsed',
init : function(parentClassPrefix) {
this.parentClassPrefix = parentClassPrefix;
$('table').on('click', 'tr', function () {
treeTable.toggleRowChildren($(this));
});
},
toggleRowChildren : function(parentRow) {
var childClass = this.parentClassPrefix+parentRow.attr('id');
var childrenRows = $('tr', parentRow.parent()).filter('.'+childClass);
childrenRows.toggle();
childrenRows.each(function(){
if (!$(this).hasClass(treeTable.collapsedClass)) {
treeTable.toggleRowChildren($(this));
}
});
parentRow.toggleClass(this.collapsedClass);
}
};
treeTable.init('parent_');
});

Something like this - this could be done better if I was going to take little more time looking at it. But this is just a quick example of how it could be done.
$(document).ready(function()
{
$(".level_0").each(function()
{
console.log("IN HERE");
$(this).nextUntil('tr.level_0').toggle();
});
});
$(document).on("click", '.level_0', function()
{
$(this).nextUntil('tr.level_0').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><table>
<tr class="header">
<th>A</th>
<th>B</th>
</tr>
<tr class="level_0" id="10">
<td>10</td>
<td> Level 0</td>
</tr>
<tr class="level_1 parent_10" id="11">
<td>10.1</td>
<td>Level 1</td>
</tr>
<tr class="level_1 parent_10" id="12">
<td >10.2</td>
<td>Level 1</td>
</tr>
<tr class="level_2 parent_12" id="13">
<td>10.2.1</td>
<td>Level 2</td>
</tr>
<tr class="level_0" id="20">
<td>20</td>
<td> Level 0</td>
</tr>
<tr class="level_1 parent_20" id="21">
<td>20.1</td>
<td>Level 1</td>
</tr>
</table>

Fixed slideToggle in table row inside another slideToggle (Jquery)

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>

How to split one row into multiple row in html

I need to split one table row into multiple row when calling a js function
This is the table:
<table id="tab_calc">
<tr class="tr_calc">
<td>Sub Total</td>
<td>Tax</td>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
<td>Total</td>
<td>Amt Paid</td>
<td>Bal Due</td>
</tr>
I want to make it look like this after I call a function:
<table id="tab_calc">
<tr>
<td>Sub Total</td>
</tr>
<tr>
<td>Tax</td>
</tr>
<tr>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
</tr>
<tr>
<td>Total</td>
</tr>
<tr>
<td>Amt Paid</td>
</tr>
<tr>
<td>Bal Due</td>
</tr>
</table>

Try below code:
fiddler
$(document).ready(function(){
$('.tr_calc').replaceWith( $('.tr_calc').html()
.replace(/<td>/gi, "<tr> <td>")
.replace(/<\/td>/gi, "</td></tr>")
);
});

Categories