JQueryを介してArraysにHTMLテーブルデータ
-
30-09-2019 - |
質問
HTMLテーブルからデータを抽出したい
<table>
<tr>
<th> Header1 </th>
<th> Header2 </th>
<th> Header3 </th>
</tr>
<tr>
<td> Value 1,1 </td>
<td> Value 2,1 </td>
<td> Value 3,1 </td>
</tr>
... rows ...
</table>
アレイを取得します:
jqueryを使用してこれを行うにはどうすればよいですか?
私はそれをシリアル化したり、JSONオブジェクトに入れたりすることを気にしません。なぜなら、それを使用してチャートをレンダリングしたいからです。
関連する一般的なデザインの質問:
現時点では、私はどんなものを持っています
1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart
JSONオブジェクトをAjaxクエリから戻し、そこからテーブルとチャートをレンダリングする方が理にかなっていますか?
解決
何か このような?
$(function() {
var headers = $("span",$("#tblVersions")).map(function() {
return this.innerHTML;
}).get();
var rows = $("tbody tr",$("#tblVersions")).map(function() {
return [$("td:eq(0) input:checkbox:checked",this).map(function() {
return this.innerHTML;
}).get()];
}).get();
alert(rows);
});
他のヒント
デモが更新されました http://jsfiddle.net/ish1301/cnsnk/
var header = Array();
$("table tr th").each(function(i, v){
header[i] = $(this).text();
})
alert(header);
var data = Array();
$("table tr").each(function(i, v){
data[i] = Array();
$(this).children('td').each(function(ii, vv){
data[i][ii] = $(this).text();
});
})
alert(data);
それを行う別の方法
var headers = jQuery('th').map(function(i,e) { return e.innerHTML;}).get();
var datas = []
jQuery.each(jQuery('tr:gt(0)'), function(i,e ) {
datas.push(jQuery('td', e).map(function(i,e) {
return e.innerHTML;
}).get()
);
});
の線に沿って何か:
var thArray = new Array();
var contentArray = new Array();
$('th').each(function(index) {
thArray[index] = $(this).html();
})
$('tr').each(function(indexParent) {
contentArray['row'+indexParent] = new Array();
$(this).children().each(function(indexChild) {
contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
});
});
これにより、2つの配列が得られます。 thArray
これはあなたの見出しの配列です contentArray
これは、行と列を含む2D配列です。 contentArray['row1']['col0']
「値1,1」を返します
実際、ContentArrayにはが含まれています th
同様に...参照された「row0」
JSONオブジェクトをAjaxクエリから戻し、そこからテーブルとチャートをレンダリングする方が理にかなっていますか?
そのとおり。 AJAXリクエストに応じてJSONを返し、JQueryテンプレートのようなものを使用してテーブルをレンダリングし、同じ基礎となるデータを使用してチャートを生成できます。
ここで同じことをいじくり回していますが、すべてのテーブルを繰り返して、ヘッダーとボディアレイを各テーブルのプロパティに書き込むことを好むので、元の答えへの変更を次に示します。
$(function() {
$("table").each(function(){
var $table = $(this),
$headerCells = $("thead th", $(this)),
$rows = $("tbody tr", $(this));
var headers = [],
rows = [];
$headerCells.each(function(k,v) {
headers[headers.length] = $(this).text();
$table.prop("headAry", headers);
});
$rows.each(function(row,v) {
$(this).find("td").each(function(cell,v) {
if (typeof rows[cell] === 'undefined') rows[cell] = [];
rows[cell][row] = $(this).text();
$table.prop("bodAry", rows);
});
});
console.log($(this).prop('headAry'));
console.log($(this).prop('bodAry'));
});
});
JSONアレイをAjaxコールから戻し、そこからテーブル/チャートを生成する方が理にかなっていると思います。 jQueryテンプレートでは、これはまったく難しくありません。
これは、「各」内のマップの代わりに再帰マップを使用するジェロームワーグナーの回答の変更です。
http://jsbin.com/oveva3/383/edit
var headers = $("th",$("#meme")).map(function() {
return this.innerHTML;
}).get();
var rows = $("tbody tr",$("#meme")).map(function() {
return [$("td",this).map(function() {
return this.innerHTML;
}).get()];
}).get();