Home › Forums › Front-end Issues › HowTo: build tables with acf and merged cells (colspan)
disclaimer:
i was searching google for a solution. i found nothing! i had to write the following code by myself only. to save you time, i show you now how to do it.
mission:
build a table in the frontend.
special task:
merge cells whose field values are equal. for better understanding see the attached screenshot.
data input:
i have a custom post type where i attached several fields of type select and checkboxes. field labels values are inserted like this:
167 : 167 dpi
212 : 212 dpi
216 : 216 dpi
252 : 252 dpi
300 : 300 dpi
323 : 323 dpi
339 : 339 ppi
now add some posts with values.
data output:
build a regular table and fetch your posts like this (my CPT is “product”):
<?php
$products = new WP_Query( array (
'post_type' => 'product',
'posts_per_page' => -1
));
if($products->have_posts()) :
$posts = $products->get_posts();
?>
<table>
<tr>
<th>Label1</th>
<?php make_cells("field1"); ?>
</tr>
<tr>
<th>Label2</th>
<?php make_cells("field2"); ?>
</tr>
</table>
<?php endif; ?>
note my custom function “make_cells” where i just pass the field name. paste the function in your theme functions.php :
function get_field_label($field_key, $post_id=null, $options=null){
global $post;
$field = get_field_object($field_key, $post_id=null,$options);
$value = get_field($field_key,$post_id);
return $field['choices'][ $value ];
}
function make_cells($field){
global $post, $posts;
$i = 1; // variable counter, may reset during foreach
$b = 1; // global counter, never resets
$end = count($posts);
echo "<td";
foreach($posts as $key => $post) {
$value = get_field($field);
$nextvalue = "";
if(isset($posts[$key+1]))
$nextvalue = get_field($field,$posts[$key+1]->ID);
if($nextvalue != $value){
echo " colspan='".$i."'>".get_field_label($field);
$i=0;
if($b != $end) echo "</td><td";
}
if($b == $end) echo "</td>";
$i++;
$b++;
}
}
this function will produce a code like this:
<td colspan='5'>6 Zoll (15 cm)</td>
<td colspan='2'>7 Zoll (17 cm)</td>
<td colspan='1'>8,9 Zoll (22,6 cm)</td>
instead of this:
<td>6 Zoll (15 cm)</td>
<td>6 Zoll (15 cm)</td>
<td>6 Zoll (15 cm)</td>
<td>6 Zoll (15 cm)</td>
<td>6 Zoll (15 cm)</td>
<td>7 Zoll (17 cm)</td>
<td>7 Zoll (17 cm)</td>
<td>8,9 Zoll (22,6 cm)</td>
the first function “get_field_label” helps you to retrieve a field value label. because the_field() and get_field() will just give you the value of a checkbox or select field!
you can see a working example of the code where i compare amazon kindle/fire tablets.
updated (better) version with prepend and append elements and support for regular text input fields and without extra function:
function make_cells($field){
global $post, $posts;
$i = 1; // variable counter, may reset during foreach
$b = 1; // global counter, never resets
$end = count($posts);
echo "<td";
foreach($posts as $key => $post) {
$value = get_field($field);
$valueobj = get_field_object($field);
$nextvalue = "";
if(isset($posts[$key+1]))
$nextvalue = get_field($field,$posts[$key+1]->ID);
if($nextvalue != $value){
echo " colspan='".$i."'>";
if(isset($valueobj["prepend"])) echo $valueobj["prepend"]." ";
if(isset($valueobj["choices"])){
if(is_array($value)){
$newarray = [];
foreach($value as $val){
$newarray[] = $valueobj["choices"][$val];
}
echo implode(", ",$newarray);
}else{
echo $valueobj["choices"][$value];
}
}else{
echo $value;
}
if(isset($valueobj["append"])) echo " ".$valueobj["append"];
$i=0;
if($b != $end) echo "</td><td";
}
if($b == $end) echo "</td>";
$i++;
$b++;
}
}
The topic ‘HowTo: build tables with acf and merged cells (colspan)’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.