CODEWITHSUNDEEP
javascriptjqueryhtml
Thomas
Thomas

Reputation: 2984

HTML5 accessing a full column to hide it via javascript / jquery

If I have to hide a full column (1 TH and multiple TDs) how to do this with HTML 5 involved?

In the past I used "Name" there to Name all columns that I wanted to be able to hide in one go the same by iterating over document.GetElementsByName("MyColumnName") and then Setting Display to None.

How is this now done in HTML5 as the Name property is no longer valid for th nor td.

Upvotes: 0

Views: 151

Answers (3)

Nicolas
Nicolas

Reputation: 1143

You could still iterate over all instances of a th with a certain id or class name. While using jQuery to do this as the better alternative, you could also still use the name tag and loop over elements by tag name.

Some examples would be:

HTML:

<td class="foo"></td>
<td id="foo"></td>

Using jQuery:

// get element by class name
$(".foo").each(function(){
    $(this).css("display", "none");
});

// get element by id
$("#foo").each(function(){
    $(this).css("display", "none");
});

Using JavaScript:

// get by class name
var foo = getElementsByClassName("foo");

for(var i = 0; i < foo.length; i++) {
}

// get by id
var foo = getElementById("foo");

for(var i = 0; i < foo.length; i++) {
}

Full example:

It is recommended that you use a class name rather than an id as an id should always be unique while there can be multiple instances of class name.

<html>
    <body>
        <table>
            <th></th>
            <td class="foo"></td>
            <td class="foo"></td>
            <td class="foo"></td>
        </table>
    </body>

    <script>
        $( document ).ready(function() {
            $(".foo").each(function(){
                $(this).css("display", "none");
            });
        });
    </script>
</html>

Upvotes: 0

SVSchmidt
SVSchmidt

Reputation: 6537

There's more than one way to select a certain element. Assuming the TH is the third TH in the table, you could select it via

document.querySelector("th:nth-of-type(3)")

and then apply style.display... to it. But without the Markup it's difficult to give a definite answer.

Upvotes: 0

Vlas Bashynskyi
Vlas Bashynskyi

Reputation: 2013

use id attribute and document.getElementById('idOfElement') function, which returns element (not array) with the given id. Or class attribute and document.getElementsByClassName('myClassName') which returns elements with class attribute equal to 'myClassName'.

Upvotes: 1

Related Questions