We Keep Coding

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>

Sorting multiple rows linked with one another (fiddle examples included)

How can I sort multiple rows (rows with colspan, linked to the targetted sort row) with sorttable.js
I have tried to slightly modify the source to support multiple rows, but it breaks the fundamental sorting of data contained in Array of row data. Here is the modified version of sorttable.js (my attempt at multiple rows)
What I'm trying to accomplish
<table id="data_table" class="sortable">
<colgroup>
<col clas="item1" />
<col class="item2" />
<col class="item3" />
</colgroup>
<thead>
<th class="item1">Item 1</th>
<th class="item2">Item 2</th>
<th class="item3">Item 3</th>
</thead>
<tbody>
<tr id="row-item-0" class="item_row" data-sorttable_row_key="0" data-sorttable_original="true" >
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-0-1" class="item_row" data-sorttable_row_key="0" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 1,2,3
</td>
</tr>
<tr id="row-item-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="true" >
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-1-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 4,5,6
</td>
</tr>
<tr id="row-item-2" class="item_row" data-sorttable_row_key="2" data-sorttable_original="true" >
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-2-1" class="item_row" data-sorttable_row_key="2" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 1,2,3
</td>
</tr>
<tr id="row-item-3" class="item_row" data-sorttable_row_key="3" data-sorttable_original="true" >
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-3-1" class="item_row" data-sorttable_row_key="3" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 4,5,6
</td>
</tr>
</tbody>
</table>
Sortable Multiple Rows (jsfiddle) (it looks like it works because it can carry the linked row with the sort, but it doesn't because the sort is completely incorrect)
Sortable Multiple Rows (using single rows, doesn't work) (jsfiddle)
Pastebin for Sortable Code used in above JSFiddles
What is supported
<table id="data_table" class="sortable">
<colgroup>
<col clas="item1" />
<col class="item2" />
<col class="item3" />
</colgroup>
<thead>
<tr>
<th class="item1 sorttable_alpha">Item 1</th>
<th class="item2 sorttable_alpha">Item 2</th>
<th class="item3 sorttable_alpha">Item 3</th>
</tr>
</thead>
<tbody>
<tr id="row-item-0" class="item_row">
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-1" class="item_row">
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-2" class="item_row">
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-3" class="item_row">
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
</tbody>
</table>
Sortable using the default code (jsfiddle)
Pastebin for above JsFiddle (contains slight modifications to original, for better ELEMENT support within cells).
Ideally what I'm looking for in the answer to this question is either:
library to do what I'm looking for,
solution to bug within my sorrtable.js modification.

You can avoid editing the sorttable.js script altogether.
Instead, create a click event on the table's thead, which moves the colspan rows into place after sorttable.js has sorted all the rows:
$('.sortable thead').click(function() {
var sortable = $(this).closest('.sortable');
sortable.find('tr:has(td[colspan])').each(function() {
var key = $(this).data('sorttable_row_key'),
link = sortable.find('tr:not(:has(td[colspan]))[data-sorttable_row_key=' + key + ']');
$(this).insertAfter(link);
});
});
I've used jQuery, since you linked to it in your Fiddle. If you prefer a vanilla JavaScript solution, let me know.
Working Fiddle

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>")
);
});

jQuery next in <TR> tag not working when TR collapse

I have a table with many rows, but each row need a help row, so they come in pairs.
For example
<tbody>
<tr>
<td>Info 1</td>
<td>Info 2</td>
<td>Info 3</td>
<td>Info 4</td>
<td> <a>button more</a> </td>
</tr>
<!-- AND -->
<tr class="bottom-row">
<td colspan="2">Info 5</td>
<td colspan="2">Info 6</td>
<td>Info 7</td>
</tr>
<tr>
<td>OtherInfo 1</td>
<td>OtherInfo 2</td>
<td>OtherInfo 3</td>
<td>OtherInfo 4</td>
<td> <a>button more</a> </td>
</tr>
<!-- AND -->
<tr class="bottom-row">
<td colspan="2">OtherInfo 5</td>
<td colspan="2">OtherInfo 6</td>
<td>OtherInfo 7</td>
</tr>
I want to click the bottom row is displayed, and click again to hide
I try use toggle of jQuery UI
$(".btnMore").click(function(){
$(this).parent("td").parent("tr").next().toggle();
});
This working perfect when the bottom rows are visible, when i add style="display:none" stops working. Try also remove style="display:none" and add in load page $(".bottom-row").hide(); but does not work either
that I can do?

Try this:
$('table').on("click", ".btnMore", function() {
$(this).closest('tr').next().toggle();
});
http://jsfiddle.net/PnUns/

It seems to work fine when I try it, http://jsfiddle.net/LF7Ar/1/
// I added the hide from the beginning
$(".btnMore").click(function(){
$(this).parent("td").parent("tr").next().toggle();
});
$('.bottom-row').hide();

same row height for nested tables in different columns

Is there a way to make the rows of a nested table from one column have the same height as the rows of a nested table from another column?
<tr>
<td>1</td>
<td>123 Technologies</td>
<td>
<table>
<tbody>
<tr>
<td>Item 1</td>
</tr>
<tr>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>Blah blah blah</td>
</tr>
<tr>
<td>Blah blah blah</td>
</tr>
<tr>
<td>Blah blah blah</td>
</tr>
</tbody>
</table>
</td>
</tr>
jsfiddle link: http://jsfiddle.net/XXmPH/
I want to align Item 1 with its corresponding tr in the next column, item 2 with its tr in the next column, and so forth.
I'm pretty sure I can do this with JavaScript but I don't think that that would be a good idea because this table would be loaded with hundreds of rows.

Despite you have already accepted an answer: Mary's answer has the disadvantage, that the columns will no longer align to the column headers. It would be better not to nest the tables at all, but instead, use rowspan:
<tbody>
<tr>
<td rowspan=2>2</td>
<td rowspan=2>XYZ Industries</td>
<td>Scope X</td>
<td>Description X</td>
</tr>
<tr>
<td>Scope Y</td>
<td>Description Y.</td>
</tr>
</tbody>
http://jsfiddle.net/XXmPH/1/

If changing layout is a possibility:
<tr>
<td>1</td>
<td>123 Technologies</td>
<td colspan="2">
<table>
<tbody>
<tr>
<td style="width: 50%">Item 1</td>
<td>Blah blah blah</td>
</tr>
<tr>
<td>Item 2</td>
<td>Blah blah blah</td>
</tr>
<tr>
<td>Item 3</td>
<td>Blah blah blah</td>
</tr>
</tbody>
</table>
</td>
</tr>
Otherwise, I think JS is needed