add table header data elsewhere
-
Is it possible to put the content from the table header in the td section? Working on a responsive table.
the goal is this:
<td data-th="Header Content">table cell content</td>so the first header content goes in the first td, second header content goes in the second td, etc.
IF this is even possible, this block needs adjusting
foreach ( $table['body'] as $tr ) { echo '<tr>'; foreach ( $tr as $td ) { echo '<td data-th="call-for-header-content">'; echo $td['c']; echo '</td>'; } echo '</tr>'; }but I can’t figure out 1- how to show the header content elsewhere, and then 2- how to cycle by th/td number.
the second part is not really a question about this plugin, but the first part is.
https://ww.wp.xz.cn/plugins/advanced-custom-fields-table-field/
-
@jonua would it be possible on mobile for the Table Heading Descriptors to appear within each row for clarity?
For example the client is concerned a lot of the context for the data is lost from desktop to mobile:
Desktop View:
where each number is clearly associated with Material, Quanity, Unit Price and Misc
to mobile where those drop away.
Mobile View
Truly appreciate your assistance and hopefully we can find a solution for them. I know they love the visual table and would willingly pay for a Pro version long-term.
So here’s what I did, this is on the single page template:
<?php $table = get_field( 'table' ); if ( $table ) { echo '<table border="0">'; if ( $table['header'] ) { echo '<thead>'; echo '<tr>'; foreach ( $table['header'] as $th ) { echo '<th>'; echo $th['c']; echo '</th>'; } echo '</tr>'; echo '</thead>'; } echo '<tbody>'; foreach ( $table['body'] as $tr ) { echo '<tr>'; foreach ( $tr as $td ) { echo '<td>'; echo $td['c']; echo '</td>'; } echo '</tr>'; } echo '</tbody>'; echo '</table>'; ?> <script> var headertext = []; var headers = document.querySelectorAll("thead"); var tablebody = document.querySelectorAll("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.replace(/\r?\n|\r/,"")); } } 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]); } } } </script> <?php } ?>The thead text is set as a data entry on each td, and when the table is shown on mobile each td shows that value directly above the content.
I got the code from here:
http://codepen.io/dudleystorey/pen/GeprdAs fare as I can understand this solution and problem, the data-th attributes are missing. The following code shows how to put these attributes in the table html…
<?php $table = get_field( 'table' ); if ( $table ) { echo '<table border="0">'; if ( $table['header'] ) { echo '<thead>'; echo '<tr>'; foreach ( $table['header'] as $th ) { echo '<th>'; echo $th['c']; echo '</th>'; } echo '</tr>'; echo '</thead>'; } echo '<tbody>'; foreach ( $table['body'] as $tr ) { echo '<tr>'; foreach ( $tr as $i => $td ) { // get the table header content by column index echo '<td data-th="' . $table['header'][ $i ]['c'] . '">'; echo $td['c']; echo '</td>'; } echo '</tr>'; } echo '</tbody>'; echo '</table>'; } ?>
The topic ‘add table header data elsewhere’ is closed to new replies.
