-
-
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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