Display and hide column in HTML by using Javascript

Question

I am writing up an webpage to display a table with 2 columns and two rows(header and body). I would like to control the show and hide of any of this 2 columns with Javacript.
The hide and display should be determined by the value of "input1" and"input2" from server.
If "input1"="empty"(string), hide colomn1(col1). Otherwise, display it. Similar logic applying to "input2" and "col2"
I printed the value "input1" in the webpage and confirmed it is equal to "empty". However, the "col1" is still in the table displayed.
Can anyone point out the problem? If my approach is incorrect, please advise what is the best alternative.

<table>
    <tr>
        <th class="col1">Genus</th>
        <th class="col2">Species</th>
    </tr>
    <tr>
        <td class="col1">column1</td>
        <td class="col2">column2</td>
    </tr>
</table>


<script type="text/javascript">
function check()
{
  if({{input1}}=="empty")
    document.getElementByID("col1").style.display = "none";
  else
    document.getElementByID("col1").style.display = "block";
  if({{input2}}=="empty")
   document.getElementByID("col2").style.display = "none";
  else
   document.getElementByID("col2").style.display = "block";
}
</script>

Please post HTML (not server-side code) and your JavaScript, properly formatted. — isherwood, Jun 03 '14 at 13:12
@isherwood I simplified the question,would you be able to give a look again? — user3459594, Jun 03 '14 at 13:31
Here's a fiddle to start with. Please make it more clear where those values come from. http://jsfiddle.net/isherwood/U7RD3/ — isherwood, Jun 03 '14 at 13:40
Please check my answer and let me know if this is what you're looking for. — Howard Renollet, Jun 03 '14 at 13:44
@isherwood {{input1}} and {{input2}} are from another HTML form, Genus
and Species — user3459594, Jun 03 '14 at 15:44

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

I can see two big mistakes over there:

The method "getElementById" will not work since you're not selecting an element by its id, you're selecting it by its class. How to do that? I'll suggest you to download the jQuery library ( http://jquery.com/ ) and then search how to select elements by its class name. jQuery is, in some way, a javascript wrapper that will make your life much easier :)
Setting the "display" property to "none" should hide it, but setting if to "block" will probably screw the table up. You should either set it to "table-cell" or "table-header-group" depending on if it's td or th. I suggest you look at the documentation of the display property: http://www.w3schools.com/cssref/pr_class_display.asp

I hope it helped :)

EDIT: if you don't want to use jquery, check at this post: How to Get Element By Class in JavaScript?

edited May 23 '17 at 12:20

Community

1
1

answered Jun 03 '14 at 13:18

Bartserk

675
6
18

Thanks for the hints. I replced "getElementByID" with "getElementByClass" and also changed "block" to "table-cell".However, it is still not hiding the col properly – user3459594 Jun 03 '14 at 13:29
Scripts go in the JS panel, and the TidyUp button is your friend. :) http://jsfiddle.net/isherwood/f2XYF/30/ – isherwood Jun 03 '14 at 13:42
@user3459594 i'm pretty sure "getElementByClass" doesn't exist. I think there's one "getElementsByClassName", but you always have to consider that you're not getting a single element from that method, it returns an array. I'd suggest you to put a debug breakpoint (using Firebug or similar) in that line so you can check what results are you getting from calling that method – Bartserk Jun 03 '14 at 13:55

A J · Answer 2 · 2014-06-04T07:57:05.393

0

This should do the trick

<script>
function hideCol() {
    if (document.getElementById("txt1").value != "") {
        var elements = document.getElementsByClassName('col1')

        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'none';
        }
    }
    if (document.getElementById("txt2").value != "") {
        var elements = document.getElementsByClassName('col2')

        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'none';
        }

    }
}
</script>

check out this fiddle

update the code as per your requirement .. but it has code to select the elements to be hidden.

Edit 1

Here is the new fiddle

have made to work according to checkboxes

function hidecol() {
    if (document.getElementById("txt1").checked) {
        var elements = document.getElementsByClassName('col1')
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'none';
        }
    }
    if (document.getElementById("txt2").checked) {
        var elements = document.getElementsByClassName('col2')
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'none';
        }
    }
}

please let me know if this was helpful

edited Jun 04 '14 at 07:57

answered Jun 03 '14 at 13:31

A J

2,112
15
24

@user3459594 : you have not checked any of the answers? – A J Jun 03 '14 at 14:35
hi AJ, I just tried your script. Seems your code inserts button which is not what i expected. In this HTML page the hide/display decision should be determined by the value of "input1" and "input2" which comes from an HTML form(input type"checkbox"). If the server, I set them equal to "empty" if it is not checked. So if "input1" is unchecked, the "col1" should not be displayed. Similar concept to "input2" and "col2" – user3459594 Jun 03 '14 at 15:51
you want this action to be performed on the click of a checkbox? you can actually make out a solution from what I have already posted. It should give you an idea about how to achieve your requirement. Instead of the button click event you may add the logic in the change event of the checkboxes. – A J Jun 04 '14 at 06:11
Have updated the result please check and let me know if this was helpful – A J Jun 05 '14 at 11:12

Howard Renollet · Answer 3 · 2014-06-03T16:55:05.980

Yes, it can be done. Here's a quick example: http://jsfiddle.net/vZB5k/

<body>
    <table>
        <tr>
            <th class="col1">Genus</th>
            <th class="col2">Species</th>
        </tr>

        <tr>
            <td class="col1">
            column1
            </td>

            <td class="col2">
            column2
            </td>
        </tr>
    </table>

    <input type="button" id="hideCol1" value="Hide Column 1" />
    <input type="button" id="hideCol2" value="Hide Column 2" />
    <input type="button" id="hideBoth" value="Hide Both" />
    <input type="button" id="showAll" value="ShowAll" />
    <script>
        var hideCol1 = function () {
            var e = document.getElementsByClassName("col1");
            for (var i = 0; i < e.length; i++) {
                e[i].style.display = "none";
            }
        };

        var hideCol2 = function () {
            var e = document.getElementsByClassName("col2");
            for (var i = 0; i < e.length; i++) {
                e[i].style.display = "none";
            }
        };

        var hideBoth = function () {
            hideCol1();
            hideCol2();
        };

        var showAll = function () {
            var e = document.getElementsByClassName("col1");
            for (var i = 0; i < e.length; i++) {
                e[i].style.display = "table-cell";
            };
            e = document.getElementsByClassName("col2");
            for (var i = 0; i < e.length; i++) {
                e[i].style.display = "table-cell";
            };
        };

        (function () {
            document.getElementById("hideCol1").addEventListener("click", hideCol1);
            document.getElementById("hideCol2").addEventListener("click", hideCol2);
            document.getElementById("hideBoth").addEventListener("click", hideBoth);
            document.getElementById("showAll").addEventListener("click", showAll);
        })();

    </script>
</body>

Updated - using "input" variables:

var hideCol1 = function () {
    var e = document.getElementsByClassName("col1");
    for (var i = 0; i < e.length; i++) {
        e[i].style.display = "none";
    }
};
var hideCol2 = function () {
    var e = document.getElementsByClassName("col2");
    for (var i = 0; i < e.length; i++) {
        e[i].style.display = "none";
    }
};
(function () {
    if (input1 !== "on") {
        hideCol1();
    }
    if (input2 !== "on") {
        hideCol2();
    }
})();

I need the script without buttons. In HTML, only table of results should be delivered(doesnt require user to select anything). The two variables "input1" and "input2" are from sever and their values will be either "on" or "empty". What I am trying to do is: if "input1"="empty", hide "col1" and if "input2"="empty", hide "col2" — user3459594, Jun 03 '14 at 15:39
so, substitute the buttons for your input. I did buttons for a live demonstration only since I wasn't sure what "input" was. I've added a section using the input variables... — Howard Renollet, Jun 03 '14 at 16:54

Display and hide column in HTML by using Javascript

3 Answers3