html - Extracting data from a table using javascript - Stack Overflow

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?

• javascript
• html

Share Improve this question Follow edited Sep 26, 2016 at 22:26 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 2, 2016 at 23:11 user2684452user2684452 73133 gold badges1414 silver badges3434 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

Sorted by: 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