user2684452 user2684452 - 2 months ago 7
HTML Question

Extracting data from a table using javascript

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?

Answer

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.