There is an expandable table in HTML:
<table width="900" id="mytable">
<tr>
<th>Cost Category</th>
<th>Costs</th>
</tr>
<tr data-depth="0" class="collapse level0" bgcolor="#A2D9CE">
<td><span class="toggle collapse"></span> First row</td>
<td>500</td>
</tr>
<tr data-depth="1" class="collapse level1" bgcolor="#D5F5E3">
<td><span class="toggle"></span> Second row</td>
<td>300</td>
</tr>
<tr data-depth="2" class="collapse level2" bgcolor="#D6EAF8">
<td><span class="toggle"></span> Third row</td>
<td>250</td>
</tr>
</table>
How can I export it to CSV while keeping the structure--expandable table?
Update: the table looks like this:
To represent this table data in a CSV, you will need a "Depth" column in addition to the "Cost Category" and "Cost" columns in the CSV.
See the code below.
const csv = [];
$("#mytable").find("tr").each((index, row) => {
const category = $(row).find("th,td").eq(0).text().trim();
const cost = $(row).find("th,td").eq(1).text().trim();
const depth = $(row).data("depth") || (index === 0 ? "Depth" : 0);
csv.push([category, cost, depth].join(", "));
});
console.log(csv.join("\n"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="900" id="mytable">
<tr>
<th>Cost Category</th>
<th>Costs</th>
</tr>
<tr data-depth="0" class="collapse level0" bgcolor="#A2D9CE">
<td><span class="toggle collapse"></span> First row</td>
<td>500</td>
</tr>
<tr data-depth="1" class="collapse level1" bgcolor="#D5F5E3">
<td><span class="toggle"></span> Second row</td>
<td>300</td>
</tr>
<tr data-depth="2" class="collapse level2" bgcolor="#D6EAF8">
<td><span class="toggle"></span> Third row</td>
<td>250</td>
</tr>
</table>
Related
So I'm trying to do a collapse info from each row of a table. The rows are generated from the Odoo framework, so, in order to associate the data-target to the corresponding ID, I iterated the table and changed the values of each.
Dispite the ids on the console and ,after inspecting the element being the same, the collapse does not work.
Can you guys help me to find the reason and a possible solution? Thanks in advance.
Javascript
var table = document.getElementById("social_programs_table");
var incr = 0;
//i = 1, because the first row should be ignored
for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows
if (i % 2 != 0) {
incr++;
row.cells[5].firstChild.nextElementSibling.dataset.target = "target" + incr;
console.log("Row Target ID: " + row.cells[5].firstChild.nextElementSibling.dataset.target);
}
else {
row.id = "target" + incr;
console.log("Row ID: " + row.id);
}
}
Respective Table
<table class="table table-striped" id="social_programs_table">
<thead>
<tr>
<th scope="col">Nome da Entidade</th>
<th scope="col">Designação do Projeto</th>
<th scope="col">Duração (meses)</th>
<th scope="col">População-alvo</th>
<th scope="col">Fonte de Financiamento</th>
<th scope="col">Saber Mais</th>
</tr>
</thead>
<tbody>
<!-- ? Loop -->
<t t-foreach="programs" t-as="obj">
<tr>
<th scope="row"><t t-esc="obj.beneficiary_entity" /></th>
<td><t t-esc="obj.name" /></td>
<td><t t-esc="obj.duration" /></td>
<td><t t-esc="obj.target_audience" /></td>
<td><t t-esc="obj.financial_source" /></td>
<td id="collapse_td">
<button class="btn btn-primary" data-toggle="collapse" data-target="#target" id="collapse_btn">+</button>
</td>
</tr>
<tr class="collapse out" id="target">
<td>This txt should be collapsed</td>
</tr>
</t>
<!-- ? End loop -->
</tbody>
</table>
The reason it's not working could be duplicate ids.
Try using any other unique value as id, like t-att-id="obj.name" & similarly assign the data-target as t-att-data-target="obj.name" and use name only if it's unique and here's code for your reference.
HTML CODE:
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</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><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>
$(".matching").after($(".comments"));
I'm using a dynamic table example I found here (bootply). Its basically a table with a parent, child relationship, so you can click on a row and it will drop down another row. I added one more level to this example, so you can think of this example as a parent, child, grandchild relationship. My issue is that if you go two levels deep, and then click the parent row it only hides the child row, but not the grandchild rows. I need to fix this 'bug' somehow.. I've tried wrapping the parent row in a div and using href="#collapse1" and than putting that id on the grandchild row but that doesn't work. Any other suggestions are greatly appreciated. Here's the html..
<table class="table table-responsive table-hover">
<thead>
<tr><th>Column</th><th>Column</th><th>Column</th><th>Column</th></tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row1">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row3">
<td>- grandchild row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
Doesn't work with a fiddle.js for some reason.. but if you go to the link and copy&paste this code you can replicate the issue.
I need to hide unused toggle buttons with jQuery.
e.g. show toggle buttons only if after header <tr class="header"> next is data <tr class="data">
I have dynamic populated table that is as the code below:
<table>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="header">
<td><a class="toggle">toggle</a></td>
<td>Header</td>
</tr>
<tr class="data">
<td></td>
<td>data</td>
</tr>
</table>
This will hide toggle buttons in which their parent rows with class header don't precede a row with class data:
$('.header').each(function() {
if(!$(this).next().hasClass('data')) {
$(this).find('.toggle').hide();
}
});
Fiddle
I have the following table structure. I want to sort this by drag and dropping. Please note that I want the root pages to have children pages. I have it working with list with hierarchy but this makes styling for legacy browsers impossible.
<table>
<tr data-id="1">
<td>Page name</td>
<td>Other column</td>
</tr>
<tr data-id="2">
<td>Page name</td>
<td>Other column</td>
</tr>
<tr class="children" data-parent="2">
<table>
<tr data-id="3">
<td>Page name</td>
<td>Other column</td>
</tr>
<tr data-id="4">
<td>Page name</td>
<td>Other column</td>
</tr>
</table>
</tr>
</table>