tree table
tree table
Plus:
#TreeTableView
idea, the simple rough version:
<script>
$(document).ready(function(){
$(".tableTree tr").each(function(){
var tr = $(this);
var td = $("td:first", tr);
td.flag = true;
td.bind("click", function(){
var i = $(td).parent().attr("id");
if(td.flag) {
$("tr[@id^="+ i +"_]").hide();
td.flag = false;
} else {
$("tr[@id^="+ i +"_]").show();
td.flag = true;
}
});
});
});
</script>
<table class="tableTree" border="1" width="100%">
<tr id="tree_1">
<td>1</td>
<td>1</td>
<td>4</td>
</tr>
<tr id="tree_1_1">
<td>1_1</td>
<td>2</td>
<td>5</td>
</tr>
<tr id="tree_1_2">
<td>1_2</td>
<td>3</td>
<td>6</td>
</tr>
<tr id="tree_1_2_1">
<td>1_2_1</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_2_2">
<td>1_2_2</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_2_3">
<td>1_2_3</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3">
<td>1_3</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_1">
<td>1_3_1</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_1_1">
<td>1_3_1_1</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_1_1_1">
<td>1_3_1_1_1</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_2">
<td>1_3_2</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_2_1">
<td>1_3_2_1</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_2_1">
<td>1_3_2_2</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_3_2_2_1">
<td>1_3_2_2_1</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_4">
<td>1_4</td>
<td> </td>
<td> </td>
</tr>
<tr id="tree_1_4_1">
<td>1_4_1</td>
<td> </td>
<td> </td>
</tr>
</table>