Show or hide table columns easily without relying on jQuery

Question

Show or hide table columns easily without relying on jQuery

Within my HTML table that contains multiple columns, I aim to create a toggle feature for one specific column (in this case, the 4th column). Currently, I have accomplished this using jQuery:

document.write('<a class="toggle" href="#!" data-alt="Hide">Show</a>');
$(document).ready(function() {
    $('.toggle').click(function() {
        var el = $(this);
        var curr = el.text();
        el.text(el.attr("data-alt"));
        el.attr("data-alt", curr);
        $('td:nth-child(4),th:nth-child(4)').toggle();
    });
});

However, as this is the only part of my website that relies on jQuery, I would prefer to implement this functionality using pure Javascript. My attempts with getElementsByClassName and classList.toggle() weren't successful since I'm unable to add attributes to all td and th elements due to my Markdown-generated HTML structure.

I suspect that there might be a solution utilizing

document.querySelectorAll('td:nth-child(x)')

, but I haven't been able to crack it yet. Any suggestions?

javascript html-table toggle visibility

Answer 1

Answer №1

A solution for your issue can be implemented in JavaScript using the

document.querySelectorAll('td:nth-child(x)')

statement.

To toggle the visibility of elements, you will need to create a separate function. Below is an example of how this function can be written:

var toggleVisibility = function (element) {
  element.style.display = (element.style.display === 'none')?'block':'none';
};

You can then use the following code snippet to toggle the visibility of a column:

document.querySelectorAll('td:nth-child(x),th:nth-child(x)').forEach(toggleVisibility);

Remember to replace 'x' with the specific column number you are targeting.

Answer 2

A solution for your issue can be implemented in JavaScript using the

document.querySelectorAll('td:nth-child(x)')

statement.

To toggle the visibility of elements, you will need to create a separate function. Below is an example of how this function can be written:

var toggleVisibility = function (element) {
  element.style.display = (element.style.display === 'none')?'block':'none';
};

You can then use the following code snippet to toggle the visibility of a column:

document.querySelectorAll('td:nth-child(x),th:nth-child(x)').forEach(toggleVisibility);

Remember to replace 'x' with the specific column number you are targeting.

Answer 3

Answer №2

If anyone is looking for a different approach, I found a way to incorporate Vivek's solution (which can be found here) while also including original text swapping. Instead of using <a>, I opted for <input> + <label>:

var message = '<input id="checkbox" type="checkbox">\
    <label for="checkbox" id="clickme" onclick="toggle()"></label>.';

document.write(message);

var toggleDisplay = function (element) {
  element.style.display = (element.style.display === 'none')?'block':'none';
};

function toggle() {
    document.querySelectorAll('td:nth-child(4),th:nth-child(4)').forEach(toggleDisplay);
};

I then utilized CSS to insert the desired text:

#checkbox {
    display: none;
}

#checkbox:not(:checked) + #clickme:after {
    content: "Show";
}

#checkbox:checked + #clickme:after {
    content: "Hide";
}

There are numerous ways to achieve this task, but this method appeared to be the most direct for me. Thank you for the help!

Answer 4

If anyone is looking for a different approach, I found a way to incorporate Vivek's solution (which can be found here) while also including original text swapping. Instead of using <a>, I opted for <input> + <label>:

var message = '<input id="checkbox" type="checkbox">\
    <label for="checkbox" id="clickme" onclick="toggle()"></label>.';

document.write(message);

var toggleDisplay = function (element) {
  element.style.display = (element.style.display === 'none')?'block':'none';
};

function toggle() {
    document.querySelectorAll('td:nth-child(4),th:nth-child(4)').forEach(toggleDisplay);
};

I then utilized CSS to insert the desired text:

#checkbox {
    display: none;
}

#checkbox:not(:checked) + #clickme:after {
    content: "Show";
}

#checkbox:checked + #clickme:after {
    content: "Hide";
}

There are numerous ways to achieve this task, but this method appeared to be the most direct for me. Thank you for the help!

Show or hide table columns easily without relying on jQuery

Answer №1

Answer №2

Similar questions

"Troubleshooting: show() Function Not Functioning Properly

sending data from Node.js to JavaScript

Error encountered while adding x-ray-scraper to project using Npm

IE11 encounters an error labeled SCRIPT1010, signaling an expected Identifier when compiled

Guide to launching a web browser within a Phonegap app with a button click event

Resolving the issue of data transmission within Yii2's framework: Page-to-page data

What is the process for retrieving data from a Cloudant document using Node.js?

Everything runs smoothly when initiating the API call through npm start, but unexpectedly crashes upon attempting to

What is the best way to iterate through an array and dynamically output the values?

Warning: The `children` attribute returned a value of NaN

Unable to load page callback using NodeJS Express and Passport-facebook

Tips on integrating googleapis with apps script

Error: Unable to process reduction on ships - function "reduce" is not functional

Utilize vue-resource for updating information in the database

Ensuring the validity of float and non-empty values in JavaScript

Perform DOM manipulation prior to triggering the AJAX event to prevent CSRF Error

What is the process for sending a message from the internet to a mobile device?

Browser extension for customizing the information on a webpage

Mastering the Rejection of Promises in Javascript with Graceful Elegance

The ThreeJS WebGLRenderTarget is displaying an empty texture