admin管理员组

文章数量:1318156

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?

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?

Share Improve this question edited Sep 26, 2016 at 22:26 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Aug 2, 2016 at 23:11 user2684452user2684452 7313 gold badges14 silver badges34 bronze badges 3
  • You can loop through the DOM with JavaScript and display it in a different format, but would it be possible to find where the data is ing from and get it from the source instead? – Dave Chen Commented Aug 2, 2016 at 23:13
  • @DaveChen You mean with an API? – user2684452 Commented Aug 2, 2016 at 23:14
  • There probably are libraries to access the DOM easier, but you can just use vanilla JavaScript to access the DOM. – Dave Chen Commented Aug 2, 2016 at 23:17
Add a ment  | 

2 Answers 2

Reset to default 4

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],
}));

本文标签: htmlExtracting data from a table using javascriptStack Overflow