jQuery对象从html表中查询为两个一维数组，用于Chartist图表

jQuery object from html table into two one-dimensional arrays for Chartist chart

本文关键字：两个 一维数组 图表 Chartist 用于 html 对象 查询 jQuery      更新时间：2023-09-26

这可能很简单，你可能会觉得很傻，但我被难住了。我在摆弄一些jQuery代码，这些代码应该从一个2列的HTML表中提取数据，然后吐出两个一维数组。例如[示例1'，示例2'，示例3'…]用于条形图标记，例如[66458724223…]用于图表中的条形值。

编辑：我后来发现"系列"数组应该是二维的，以便在同一图表中显示更多的数据集。如果只使用一个"系列"数据集，请在其周围放上括号，将其转换为数组中的数组

我已经设法将HTML表值放入一个jQuery对象中，如下所示：

var tdata = [];
var headers = [];
$('#myTable th').each(function(index, item) {
headers[index] = $(item).html();
});
$('#myTable tr').has('td').each(function() {
var tdataItem = {};
$('td', $(this)).each(function(index, item) {
    tdataItem[headers[index]] = $(item).html();
});
tdata.push(tdataItem);
});

其中myTable是一个HTML表，类似于：

<table id="myTable">
<tbody><tr>
<th>Oxide</th>
<th>Proportion</th>
</tr>
<tr>
<td>Ca0</td>
<td>0.73</td>
</tr>
<tr>
<td>Li2O</td>
<td>0</td>
</tr>
<tr>
<td>MgO</td>
<td>0.13</td>
</tr>
</tbody></table>

问题是，我无法将第一列（在"Oxides"下）和第二列的值（在"Proportion"下）放入它们自己的一维数组中，以输入Chartist，Chartist基本上需要这个：

var data = {
  labels: ['CaO', 'Li2O', 'MgO'],
  series: [0.73, 0, 0.13]
    ]
};

我做了一个JSfiddle，你可以通过console.log(tdata); 看到数组的输出

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
0:
Object
Oxide:
"Ca0"
Proportion:
"0.73"
__proto__:
Object

这些对象似乎是多维的，或者有一些jQuery的怪异之处，因为我还没有为Chartist提取出一维的"标签"answers"序列"数组。不过，它应该非常简单？

看起来数据可能是向后的。您存储的是一个对象数组，而不是一个有2个数组的对象。

我用一个创建Chartist使用的"数据"对象的例子更新了fiddle。

https://jsfiddle.net/t539uuok/1/

var data = {
    labels: [],
  series: []
};
$("#myTable tr").has("td").each(function () {
    data.labels.push($(this).find("td:first").html());
    data.series.push($(this).find("td:last").html());
});

如果你需要它是动态的，就需要有其他的改变。但是，如果您只想捕获一维标签/序列数据，这将起作用。

相关文章：