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.
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'.
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.
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>
