Edit -tags with or without Javascript

  • Resolved Joehann

    (@joehann)


    2 years ago

    I would like to add ids, more classes or data attributes to the <td>-tags of my created table. Problem: It has to be equal to the content in the <td>-tags. So something like this:
    <td class=” pub1_col3 wpda_format_string” data-value=”tennis”>Tennis</td>.

    I tried a few Javascript-Codes ChatGPT gave me, but they all didn’t work. Is there a reason for this? And how can I customize my <td>-tags the way I like to?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter Joehann

    (@joehann)

    Let me paraphrase that:
    Is there a template where I can customize my table, which I made with a custom query?

    Plugin Contributor Kim L

    (@kimmyx)

    Hi @joehann,

    You can further customize your table using the Advanced Settings section in your data table.

    Please see this page for more information: Advanced Settings

    Let us know if this helps! ??

    Thread Starter Joehann

    (@joehann)

    Sorry, that’s out of my league. I need the <td>s of my table to get some kind of individual distinction, i.e. an id, a class or a data-attribute which equals the content of the td. How can I achieve that? I have no clue about JSON and hardly any clue about Javascript.

    ChatGPT made some code-suggestions based on Javascript, but they all don’t work with my tables, when I am using your plugin.

    • This reply was modified 2 years ago by Joehann.
    • This reply was modified 2 years ago by Joehann.
    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Joehann,

    All TD tags in a data table already have two classes:
    – One class representing the column name (the red arrow in the screenshot added below)
    – One class respresenting the data type (the green arrow in the screenshot added below)

    https://ibb.co/fq1VvV

    You can use these classes to group TD’s or access individual TD’s. This works with CSS and JavaScript.

    Of course this only works within a row, but you can also access specific rows using the tr:nth-child(n) selector like this:

    tr:nth-child(4) td.column_name {}

    This works with CSS and JavaScript as well and allows you to access any TD in the table specifically.

    Does this help? If not, can you share your requirements…

    Thanks,
    Peter

    Thread Starter Joehann

    (@joehann)

    I know about these two classes and the option to use nth-child. My problem is that the order of rows changes dynamically, so it makes no sense for me to work with nth-child. I definetely need a way to tag every <td> with a class which equals the value/content of the <td>-tag.

    My goal is to insert background-images into the <td>-tags of a certain column via CSS based on the class of the tds. So i.e. all tds with the class “horse” get the background-image of a horse.

    Plugin Author Passionate Programmer Peter

    (@peterschulznl)

    Hi Joehann,

    Thanks for the background info. That helps!

    For your use case you can use the fnRowCallback option. You can find an example here:

    https://wpdataaccess.com/docs/data-tables-advanced-features/advanced-settings/

    Please scroll down to: revised javascript example

    The example change the column color based on the column content. It’s almost similar to your use case. You just need to know a little javascript. Let us know if you need help with it.

    Does this solve the issue?

    Thanks,
    Peter

    Thread Starter Joehann

    (@joehann)

    Yes, it freaking did! I made it. Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Edit -tags with or without Javascript’ is closed to new replies.