简体   繁体   中英

Show Table Details in Additional Row using JQuery

I've a html table that I would like to use a toggle to display additional information (and then push down the other rows).

Image to describe what I want to do: https://www.screencast.com/t/SBzG2IN9 On click toggle, show additional row (in green) and push the table down.

NOTE: The code below is not in HTML, but in the backend of WordPress Toolset. The [wpv-post-id] is a toolset variable that will output the wordpress postid on the front end. Eg, 1915, so data-prod-cat="1915" and the class becomes "cat1915".

[wpv-post-excerpt format="noautop"] also outputs the corresponding post excerpt in plain text (without

).

Update: I've updated the code and the toggle button manages to change the display from display:none to display: table-row ; however no new row shows up with the excerpt.

Update 2: Resolved!

Here's the loop output:

[wpv-layout-start]
    [wpv-items-found]
    <!-- wpv-loop-start -->
    <table width="100%">
        <thead>
            <tr>
                <th>[wpv-heading name="types-field-release-date"]Year[/wpv-heading]</th>
                <th>[wpv-heading name="post-link"]Title[/wpv-heading]</th>
                <th>[wpv-heading name="types-field-publisher"]Publisher[/wpv-heading]</th>
                <th>[wpv-heading name="post-excerpt"]Synopsis[/wpv-heading]</th>
            </tr>
        </thead>
        <tbody class="wpv-loop js-wpv-loop">
        <wpv-loop>
            <tr>
                <td>[types field='release-date' style='text' format='Y'][/types]</td>
                <td>[wpv-post-link]</td>
                <td>[types field="publisher"][/types]</td>
                <td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
            </tr>
            <tr class="cat[wpv-post-id]" style="display:none" [wpv-post-excerpt format="noautop"]></tr>
        </wpv-loop>
        </tbody>
    </table>
    <!-- wpv-loop-end -->
    [/wpv-items-found]
    [wpv-no-items-found]
        <strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
    [/wpv-no-items-found]
[wpv-layout-end]
jQuery(document).ready(function(){
     jQuery(".toggler").click(function(e){
        e.preventDefault();
       jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

You can not use [ and ] in css selector or in class name. cause they are the default attribute selectors.

You must change your class to some thing with A-Za-z0-9 charcters.

see attribute selector

when you want to select element with .cat[wpv-post-excerpt] . the browser think you want some thing like this: <tr class="cat" wpv-post-excerpt=""></tr>

After that i think its the template variable and its not a really this [wpv-post-excerpt] string. see the result of your theme and do your job with them.

The problem with your code is that tr work as table row only when it is inside table tag. Second you can not take [ or ] in you selector. So please change your code according to that:

<table>
    <wpv-loop>
      <tr>
        <td>[types field='release-date' style='text' format='Y'][/types]</td>
        <td>[wpv-post-link]</td>
        <td>[types field="publisher"][/types]</td>
        <td><a href="#" class="toggler" data-prod-cat='wpv-post-excerpt'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
      </tr>
      <tr class="cat-wpv-post-excerpt" style="display:none">
        <td colspan="100%">I m test</td>
      </tr>
    </wpv-loop>
</table>

And your js code is this:

jQuery(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $('.cat-' + $(this).attr('data-prod-cat')).toggle();
  });
});
jQuery(document).ready(function() {
  $(".toggler").click(function(e) {
    e.preventDefault();
    $('.cat-' + $(this).attr('data-prod-cat')).toggle();
  });
});

<wpv-loop>
 <table>
  <tr>
    <td>[types field='release-date' style='text' format='Y'][/types]</td>
    <td>[wpv-post-link]</td>
    <td>[types field="publisher"][/types]</td>
    <td><a href="#" class="toggler" data-prod-cat='wpv-post-excerpt'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
  </tr>
  <tr class="cat-wpv-post-excerpt" style="display:none">
   <td>all reacords</td>
  </tr>
 </table>
</wpv-loop>

Okay resolved!

jQuery(document).ready(function(){
     jQuery(".toggler").click(function(e){
        e.preventDefault();
       jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

This code worked, but earlier answers indicate that the css selector doesn't work with []. But this is just a variable on the backend. However, [wpv-post-excerpt] outputs a very long paragraph and it didn't work as a selector either. So I used [wpv-post-id] which outputs the wordpress post id.

Here's the snippet of the code that worked:

<table>
        <wpv-loop>
            <tr>
                <td>[types field='release-date' style='text' format='Y'][/types]</td>
                <td>[wpv-post-link]</td>
                <td>[types field="publisher"][/types]</td>
                <td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
            </tr>
            <tr class="cat[wpv-post-id]" style="display:none">
            <td colspan="4">[wpv-post-excerpt]</td>
            </tr>
        </wpv-loop>
        </tbody>
</table>

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM