I am using the code from this CodePen to make my tables responsive: http://codepen.io/anon/pen/myayee
Everything on my site is working as in his example, however I want to add more than 1 table to the page. When I do this, only the first table on the page get's the "data-th=" added to it when the browser is made smaller, the rest of the tables are blank. I would like it to be added to all of the table headers on the page, but not sure how to change his code to accomplish it.
I changed some of the classes, so here is my code (tables cut down in the interest of space):
//JS FOR RESPONSIVE TABLES
var headertext = [],
headers = document.querySelectorAll(".responsive th"),
tablerows = document.querySelectorAll(".responsive th"),
tablebody = document.querySelector(".responsive tbody");
for(var i = 0; i < headers.length; i++) {
var current = headers[i];
headertext.push(current.textContent.replace(/\r?\n|\r/,""));
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
}
}
HTML
<table class="responsive mesh">
<thead>
<tr>
<th>Phifer</th>
<th>Openness</th>
<th>Sun/UV</th>
<th>Protection</th>
<th>Sample</th>
</tr>
</thead>
<tbody>
<tr>
<td>18/14 - Charcoal</td>
<td>58%</td>
<td>Up To 40%</td>
<td>Blockage</td>
<td><img src="http://minnesotascreens.cloudaccess.host/wp-content/uploads/2015/03/mesh_1814_charcoal.jpg" alt="mesh_1814_charcoal" class="alignnone size-full wp-image-227" /></td>
</tr>
</tbody>
</table>
<hr/>
<table class="responsive mesh">
<thead>
<tr>
<th>Phifer 20/30</th>
<th>Openness</th>
<th>Sun/UV</th>
<th>Protection</th>
<th>Sample</th>
</tr>
</thead>
<tbody>
<tr>
<td>Charcoal</td>
<td>32%</td>
<td>Up To 65%</td>
<td>Blockage</td>
<td><img src="http://minnesotascreens.cloudaccess.host/wp-content/uploads/2015/03/mesh_2030_charcoal.jpg" alt="mesh_2030_charcoal" class="alignnone size-full wp-image-236" /></td>
</tr>
</tbody>
</table>
My Site: http://minnesotascreens.cloudaccess.host/products/phantom-retractable-door-screens/
You need to iterate all tables, then all rows and cells inside every table. Try something like this:
var tables = document.querySelectorAll(".responsive"),
tbody, headers, headertext, i, j, k;
for (i = 0; i < tables.length; i++) {
tbody = tables[i].tBodies[0];
headers = tables[i].tHead.rows[0].children;
headertext = [];
for (j = 0; j < headers.length; j++) {
headertext.push(headers[j].textContent.trim());
}
for (j = 0; j < tbody.rows.length; j++) {
for (k = 0; k < tbody.rows[j].cells.length; k++) {
tbody.rows[j].cells[k].setAttribute("data-th", headertext[k]);
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.