Skip to content

Instantly share code, notes, and snippets.

@Elgameel
Forked from jpen365/responsive-table.js
Last active April 6, 2019 15:45
Show Gist options
  • Save Elgameel/2f4f4329f3a60a7bac66abd515ad1e8d to your computer and use it in GitHub Desktop.
Save Elgameel/2f4f4329f3a60a7bac66abd515ad1e8d to your computer and use it in GitHub Desktop.
Get table headings to use with responsive table layout and exclude wp-block-table is-style-stripes
/* Credits:
This bit of code: Exis | exisweb.net/responsive-tables-in-wordpress
Original idea: Dudley Storey | codepen.io/dudleystorey/pen/Geprd */
var headertext = [];
var headers = document.querySelectorAll("table:not(.is-style-stripes) thead");
var tablebody = document.querySelectorAll("table:not(.is-style-stripes) tbody");
for (var i = 0; i < headers.length; i++) {
headertext[i]=[];
for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
var current = headrow;
headertext[i].push(current.textContent);
}
}
for (var h = 0, tbody; tbody = tablebody[h]; h++) {
for (var i = 0, row; row = tbody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[h][j]);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment