score:15
Something like this?
$(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);
});
score:0
I would think it would make more sense to get a json array back from the ajax call and generate your table/chart from that. With jquery templates this isn't hard at all.
score:0
Use this line of code:
var arrays = [];
$('table').eq(0).find('tr').each((r,row) => arrays.push($(row).find('td,th').map((c,cell) => $(cell).text()).toArray()))
score:1
Something along the lines of:
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();
});
});
This gives you two arrays, thArray
which is an array of your headings and contentArray
which is a 2d array containing rows and columns: contentArray['row1']['col0']
returns " Value 1,1"
Actually, contentArray contains the th
's as well... referenced 'row0'
score:1
does it make more sense to throw a JSON object back from the ajax query and then render a table and a chart from there?
Yes, absolutely. Return JSON in response to your AJAX request, then you can render the table using something like jQuery Templates and use the same underlying data to generate your chart as well.
score:1
Here's a modification of Jerome Wagner's answer that uses recursive maps instead of a map inside an 'each':
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();
score:1
I'm tinkering with the same thing over here, but I prefer iterating through all tables and writing the header and body arrays into properties of each table, so here's my modification to the original answer:
$(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'));
});
});
score:3
yet another way of doing it
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()
);
});
score:17
demo updated 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);
Source: stackoverflow.com
Related Query
- HTML table data into arrays via jQuery
- Highcharts display label for pie chart using html table as data source
- HTML table as data source for highstock charts using highcharts
- Stacked Bar type of jquery Highcharts with data from HTML Table
- Use HTML class as Highcharts table data source
- Link table data with chart data Jquery
- Generate chart from html table : JQuery
- Convert JQuery Data into HighChart Format
- Highcharts loading data from a HTML table with a title
- Render Highcharts data table to separate container as chart via drawing API?
- How to populate multi table data in jquery High-chart
- Highcharts Output Data to HTML Table
- using dynamic data from highcharts in a html table
- Highcharts with data populated by php generated html table - only one will load
- Fomatting labels on Y-axis in Highcharts with Data from HTML table
- Jquery & Ajax for data retrieval used for highcharts implementation + HTML
- Highlight relative row in html table when clicking on Highchart data
- javascript Highcharts JSON data to HTML table
- Highchart (pie chart) with data from HTML table not displaying legend
- Angular 5 - Highcharts cannot load data from a HTML table
- HighCharts data defined in a HTML Table using PHP MySQL
- Parsing Data From HTML Table
- Highchart Data from HTML table with <input> values
- Highchart Data from HTML table with line series
- Highcharts combining a column and spline chart from an html data table
- Insert data into jquery highcharts fail
- Insert data into jquery highcharts fail
- Unable to get dynamic data into Jquery pie chart
- Importing data from HTML table to highcharts
- High Chart inserting data from arrays into line graph
More Query from same tag
- HighStocks - Adding 2 charts on same page
- How to match columns height with spline in Highcharts
- Getting 'Cannot read property "length" from undefined' exception while rendering chart at JasperReports Server
- chart.setOptions is not defined
- Highcharts low performance when adding yAxis dynamically
- Highcharts dataLabels not showing in all levels of drilldown
- Highchart automatically add quotes to the variable
- Highchart yAxis plotLines label position
- Why is this drilldown graph made by python-highcharts not working?
- Highcharts column drilldown, assign two different colours to the two different drilldown columns?
- Highcharts' verifying stacking issues
- Working with Highcharts using @ViewChildren
- Highstock Navigator plugin doesn't render in firefox
- Displaying linechart using angular2-highcharts
- Highcharts Solid Gauge Dynamic Update Using JSON
- Click event not fire in highcharts tooltip
- Highcharts: Cannot read property 'chart' of undefined
- how to parse json into highcharts
- Highcharts need parse data for showing points?
- On DrillUp Set Series Name Failing
- Tooltip in chart with line- and scatter plot in highcharts 3.0.7
- How to tell if series is in upper chart or lower chart in tooltip (using highstock)?
- Symfony webpack "Highcharts is not defined"
- Ember.js , HighCharts - accessing JSON data from controller
- Highchart js Area chart Tooltip bug
- Highcharts stock-chart y-axis values go over 100%
- highcharts change series color when data is dynamically inserted
- Angular Highcharts-ng how to set additional data series as tooltip
- How do you convert time series data with pandas and show graph via highstock
- resizing multiple highcharts in a table