javascript - 使用 Javascript 将可扩展表导出为 CSV

Question

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>

如何将其导出为 CSV，同时保留结构 - 可扩展表？

更新:表格如下所示:

Answer 1

要在 CSV 中表示此表数据，除了 CSV 中的“成本类别”和“成本”列之外，您还需要一个“深度”列。

请参阅下面的代码。

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>