将表数据复制到页面内的 javascript json 对象中

Question

我有一个页面，主要有一个包含几列的html表。

其中两个是经度和纬度，可以用#tablename tr td:nth-child(9)和10引用。

加载页面后，我想将两列的每一行复制到 javascript json 对象中。

我计划使用 json 来填充动态生成的图形(d3 geo(。

主要目的是避免在页面中以 json 形式嵌入数据的重复副本。

请注意，表和 javascript 代码将位于同一页面上，并且永远不会修改表数据。

有什么建议或库可以轻松实现这一目标吗？

Answer 1

你可以像这样使用表到JSON的JQuery插件：

let data = $(`#myTable`).tableToJSON();
console.log(data);

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
		crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/table-to-json@1.0.0/lib/jquery.tabletojson.min.js" 
integrity="sha256-H8xrCe0tZFi/C2CgxkmiGksqVaxhW0PFcUKZJZo1yNU=" 
crossorigin="anonymous"></script>
<table id="myTable">
<thead>
<tr>
<th>Catalog</th>
<th>HIP</th>
<th>Proxy</th>
<th>RAhms</th>
<th>DEdms</th>
<th>Vmag</th>
<th>VarFlag</th>
<th>r_Vmag</th>
<th>RAdeg</th>
<th>DEdeg</th>
<th>Plx</th>
<th>pmRA</th>
<th>pmDE</th>
<th>e_RAdeg</th>
<th>e_DEdeg</th>
<th>e_Plx</th>
<th>e_pmRA</th>
<th>e_pmDE</th>
<th>DE:RA</th>
<th>BTmag</th>
<th>e_BTmag</th>
<th>VTmag</th>
<th>e_VTmag</th>
<th>m_BTmag</th>
<th>B-V</th>
<th>e_B-V</th>
<th>r_B-V</th>
<th>V-I</th>
<th>e_V-I</th>
<th>r_V-I</th>
<th>Hpmag</th>
<th>e_Hpmag</th>
<th>Hpscat</th>
<th>o_Hpmag</th>
<th>m_Hpmag</th>
<th>Hpmax</th>
<th>HPmin</th>
<th>Period</th>
<th>HvarType</th>
<th>Ncomp</th>
<th>MultFlag</th>
<th>Qual</th>
<th>m_HIP</th>
<th>theta</th>
<th>rho</th>
<th>Survey</th>
<th>Chart</th>
<th>HD</th>
<th>CoD</th>
<th>(V-I)red</th>
<th>SpType</th>
<th>r_SpType</th>
</tr>
</thead>
<tbody>
<tr id="85344">
<td> H </td>
<td> <a target="_blank" href="http://news.sky-map.org/starview?object_type=1&amp;object_id=343839">85344</a> </td>
<td> </td>
<td> 17 26 23.25 </td>
<td> +22 06 35.5 </td>
<td> 8.81 </td>
<td> 2 </td>
<td> H </td>
<td> 261.59688825 </td>
<td> +22.10985186 </td>
<td> 3.28 </td>
<td> 6.04 </td>
<td> -21.15 </td>
<td> 0.73 </td>
<td> 0.95 </td>
<td> 1.22 </td>
<td> 1.14 </td>
<td> 1.57 </td>
<td> -0.26 </td>
<td> 10.969 </td>
<td> 0.042 </td>
<td> 9.002 </td>
<td> 0.014 </td>
<td> </td>
<td> 1.667 </td>
<td> 0.036 </td>
<td> T </td>
<td> 1.99 </td>
<td> 0.09 </td>
<td> O </td>
<td> 8.8883 </td>
<td> 0.0035 </td>
<td> 0.037 </td>
<td> 153 </td>
<td> </td>
<td> 8.84 </td>
<td> 8.95 </td>
<td> </td>
<td> U </td>
<td> 1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> 1.94 </td>
<td> M1 </td>
<td> S </td>
</tr>
<tr id="85345">
<td> H </td>
<td> <a target="_blank" href="http://news.sky-map.org/starview?object_type=1&amp;object_id=1104384">85345</a> </td>
<td> </td>
<td> 17 26 24.05 </td>
<td> +65 14 10.7 </td>
<td> 8.72 </td>
<td> </td>
<td> H </td>
<td> 261.60020844 </td>
<td> +65.23630285 </td>
<td> 1.87 </td>
<td> -6.50 </td>
<td> 6.18 </td>
<td> 0.59 </td>
<td> 0.70 </td>
<td> 0.69 </td>
<td> 0.52 </td>
<td> 0.79 </td>
<td> -0.10 </td>
<td> 9.982 </td>
<td> 0.022 </td>
<td> 8.820 </td>
<td> 0.014 </td>
<td> </td>
<td> 0.997 </td>
<td> 0.020 </td>
<td> T </td>
<td> 0.98 </td>
<td> 0.02 </td>
<td> L </td>
<td> 8.8854 </td>
<td> 0.0015 </td>
<td> 0.013 </td>
<td> 91 </td>
<td> </td>
<td> 8.86 </td>
<td> 8.91 </td>
<td> </td>
<td> C </td>
<td> 1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> 0.95 </td>
<td> G0 </td>
<td> S </td>
</tr>
</tbody>
</table>