使用javascript组合两个html表格内容（表格的一部分），并下载为png和csv
我通过使用$（'#xxx'）.html（）使用了所需内容的id，并将它们添加到变量中，如var b='+$（'#xxx'）.html（）+$（'#yy'）.html（）。并考虑将LAOD b降级为png和csv使用javascript组合两个html表格内容（表格的一部分），并下载为png和csv,javascript,jquery,html,csv,html2canvas,Javascript,Jquery,Html,Csv,Html2canvas,我通过使用$（'#xxx'）.html（）使用了所需内容的id，并将它们添加到变量中，如var b='+$（'#xxx'）.html（）+$（'#yy'）.html（）。并考虑将LAOD b降级为png和csv <div id="table_parent_div"> <div class="table_header"> <table class="data_table"> <thead> <tr
<div id="table_parent_div">
<div class="table_header">
<table class="data_table">
<thead>
<tr style="height: 40px;">
<th class="header">KPI Name</th>
<th class="header">May-2016</th>
<th class="header">Jun-2016</th>
<th class="header">Jul-2016</th>
<th class="header">Aug-2016</th>
<th class="header">Sep-2016</th>
<th class="header">Oct-2016</th>
<th class="header">Nov-2016</th>
<th class="header">Dec-2016</th>
<th class="header">Jan-2017</th>
<th class="header">Feb-2017</th>
<th class="header">Mar-2017</th>
<th class="header">Apr-2017</th>
<th class="header">May-2017</th>
</tr>
</thead>
</table>
</div>
<div class="table_body">
<table class="data_table_body">
<tbody id="category_name_0">
<tr>
<td class=" name ">category name 0</td>
<td class=" name ">149.7 </td>
<td class=" name ">149.57 </td>
<td class=" name ">140.6 </td>
<td class=" name ">154.82 </td>
<td class=" name ">158.12 </td>
<td class=" name ">168.71 </td>
<td class=" name ">161.11 </td>
<td class=" name ">149.15 </td>
<td class=" name">149.03 </td>
<td class=" name">114.2 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name1 </td>
<td class=" sub_cat">35.22 </td>
<td class=" sub_cat">37.16 </td>
<td class=" sub_cat">26.03 </td>
<td class=" sub_cat">38.96 </td>
<td class=" sub_cat">35.22 </td>
<td class=" sub_cat">49.99 </td>
<td class=" sub_cat">43.24 </td>
<td class=" sub_cat">39.66 </td>
<td class=" sub_cat">40.61 </td>
<td class=" sub_cat">32.2 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name3 </td>
<td class=" sub_cat">34.43 </td>
<td class=" sub_cat">30.88 </td>
<td class=" sub_cat">28.75 </td>
<td class=" sub_cat">29.54 </td>
<td class=" sub_cat">33.04 </td>
<td class=" sub_cat">33.46 </td>
<td class=" sub_cat">28.54 </td>
<td class=" sub_cat">30.41 </td>
<td class=" sub_cat">22.78 </td>
<td class=" sub_cat">17.93 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat">80.06 </td>
<td class=" sub_cat">81.52 </td>
<td class=" sub_cat">85.83 </td>
<td class=" sub_cat">86.31 </td>
<td class=" sub_cat">89.85 </td>
<td class=" sub_cat">85.26 </td>
<td class=" sub_cat">89.33 </td>
<td class=" sub_cat">79.08 </td>
<td class=" sub_cat">85.64 </td>
<td class=" sub_cat">64.07 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
<tbody id="category_name_1">
<tr>
<td class=" name ">category name 1</td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">3.72 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name1 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">2.23 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name5 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">1.86 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name4 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.37 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat">sample_name3 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.78 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.7 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
<tbody id="category_name_2">
<tr>
<td class=" name ">category name 2</td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">74.51 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name4 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">73.55 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.96 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
</table>
</div>
KPI名称
2016年5月-2016年
2016年6月
2016年7月
2016年8月
2016年9月
2016年10月
2016年11月
2016年12月
2017年1月
2017年2月
2017年3月
2017年4月
2017年5月-5月
类别名称0
149.7
149.57
140.6
154.82
158.12
168.71
161.11
149.15
149.03
114.2
-
-
-
样本名称1
35.22
37.16
26.03
38.96
35.22
49.99
43.24
39.66
40.61
32.2
-
-
-
样本名称3
34.43
30.88
28.75
29.54
33.04
33.46
28.54
30.41
22.78
17.93
-
-
-
样本名称2
80.06
81.52
85.83
86.31
89.85
85.26
89.33
79.08
85.64
64.07
-
-
-
类别名称1
-
-
-
-
-
3.72
-
-
-
-
-
-
-
样本名称1
-
-
-
-
-
2.23
-
-
-
-
-
-
-
样本名称5
-
-
-
-
-
1.86
-
-
-
-
-
-
-
样本名称4
-
-
-
-
-
0.37
-
-
-
-
-
-
-
样本名称3
-
-
-
-
-
0.78
-
-
-
-
-
-
-
样本名称2
-
-
-
-
-
0.7
-
-
-
-
-
-
-
类别名称2
-
-
-
-
-
74.51
-
-
-
-
-
-
-
样本名称4
-
-
-
-
-
73.55
-
-
-
-
-
-
-
样本名称2
-
-
-
-
-
0.96
-
-
-
-
-
-
-
在这里，我需要将thead和tbody（例如：tbody with id=“category\u name\u 1”）结合起来，并将它们作为png和csv下载。听起来像是一个计划。那么，下一步是什么。@Todor稍后，我将使用html2canvas.js将其转换为画布，然后使用Filesaver.js保存图像，但我不知道该怎么做。这样更好-请务必包含问题的代码和错误。没有他们，任何人都无法帮助你。
<div id="table_parent_div">
<div class="table_header">
<table class="data_table">
<thead>
<tr style="height: 40px;">
<th class="header">KPI Name</th>
<th class="header">May-2016</th>
<th class="header">Jun-2016</th>
<th class="header">Jul-2016</th>
<th class="header">Aug-2016</th>
<th class="header">Sep-2016</th>
<th class="header">Oct-2016</th>
<th class="header">Nov-2016</th>
<th class="header">Dec-2016</th>
<th class="header">Jan-2017</th>
<th class="header">Feb-2017</th>
<th class="header">Mar-2017</th>
<th class="header">Apr-2017</th>
<th class="header">May-2017</th>
</tr>
</thead>
</table>
</div>
<div class="table_body">
<table class="data_table_body">
<tbody id="category_name_0">
<tr>
<td class=" name ">category name 0</td>
<td class=" name ">149.7 </td>
<td class=" name ">149.57 </td>
<td class=" name ">140.6 </td>
<td class=" name ">154.82 </td>
<td class=" name ">158.12 </td>
<td class=" name ">168.71 </td>
<td class=" name ">161.11 </td>
<td class=" name ">149.15 </td>
<td class=" name">149.03 </td>
<td class=" name">114.2 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name1 </td>
<td class=" sub_cat">35.22 </td>
<td class=" sub_cat">37.16 </td>
<td class=" sub_cat">26.03 </td>
<td class=" sub_cat">38.96 </td>
<td class=" sub_cat">35.22 </td>
<td class=" sub_cat">49.99 </td>
<td class=" sub_cat">43.24 </td>
<td class=" sub_cat">39.66 </td>
<td class=" sub_cat">40.61 </td>
<td class=" sub_cat">32.2 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name3 </td>
<td class=" sub_cat">34.43 </td>
<td class=" sub_cat">30.88 </td>
<td class=" sub_cat">28.75 </td>
<td class=" sub_cat">29.54 </td>
<td class=" sub_cat">33.04 </td>
<td class=" sub_cat">33.46 </td>
<td class=" sub_cat">28.54 </td>
<td class=" sub_cat">30.41 </td>
<td class=" sub_cat">22.78 </td>
<td class=" sub_cat">17.93 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat">80.06 </td>
<td class=" sub_cat">81.52 </td>
<td class=" sub_cat">85.83 </td>
<td class=" sub_cat">86.31 </td>
<td class=" sub_cat">89.85 </td>
<td class=" sub_cat">85.26 </td>
<td class=" sub_cat">89.33 </td>
<td class=" sub_cat">79.08 </td>
<td class=" sub_cat">85.64 </td>
<td class=" sub_cat">64.07 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
<tbody id="category_name_1">
<tr>
<td class=" name ">category name 1</td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">3.72 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name1 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">2.23 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name5 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">1.86 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name4 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.37 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat">sample_name3 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.78 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.7 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
<tbody id="category_name_2">
<tr>
<td class=" name ">category name 2</td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">74.51 </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
<td class=" name">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name4 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">73.55 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
<tr>
<td class=" sub_cat ">sample_name2 </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat ">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">0.96 </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
<td class=" sub_cat">- </td>
</tr>
</tbody>
</table>
</div>