I am using healcode to display mindbody data on my site. I am using the healcode widgets, and the problem is I can only alter CSS and not touch the HTML The widget delivers the data in a table which is very limiting for my needs. I want be able to create the html structure, or at least manipulate the current structure.
Is it possible to use CSS or Javascript or both to extract content and data from a table and re-create the HTML structure of my choice?
Surely you can do this via JavaScript, although this is a rather broad question. You have to get the table element you need to manipulate (say, if it has and id someId, you have to use var table = document.getElementById('someId');) and then either manipulate its table.innerHTML (probably a good starting point) or its children using DOM API: say, for this page ("Parameter Values" table) you may try in browser console:
// first table with the "w3-table-all notranslate" class
var table = document.getElementsByClassName("w3-table-all notranslate")[0];
table
.children[0] // will get the tbody element
.children[1] // will get the second row from the tbody element
.children[0] // will get the first (colomn) cell in the second row
.innerHTML; // will show you html contents of the cell in the console
// change the cell contents
table.children[0].children[1].children[0].innerHTML = "<b>I've changed this stuff!</b>";
// you may also want to remember rows/cells:
var row = table.children[0].children[1];
var cell = row.children[0];
And basically that's it.
Above answer did not answer my question of extracting data from HTML table
Here's a snippet I wrote that will extract the data and give the output.
const extractData = (tableId, mapper) => {
const myTab = document.getElementById(tableId);
if (myTab) {
const data = [...myTab.rows].map((r) => [...r.cells].map((c) => c.innerText));
return data.map(mapper);
}
};
// Call the function and do whatever you want with the data
const data = extractData('myTable', (x) => ({
name: x[0],
address: x[1],
city: x[2],
state: x[3],
}));
