Change HTML table style from Javascript function?

Question

I have this table:

<table id="classTable" style="width:40%">
<tr>
    <td>WCOB 2053: Business Foundations</td>
    <td>MWF 10:45am</td>
</tr>
<tr>
    <td>MATH 2043C: Survey of Calculus</td>
    <td>MW 12:55pm</td>
</tr>
<tr>
    <td>ISYS 2103: Business Information Systems</td>
    <td>MW 4:30pm</td>
</tr>
<tr>
    <td>ISYS 2263: Principles of Information Systems</td>
    <td>TTh 9:30am</td>
</tr>
<tr>
    <td>CSCE 3193: Programming Paradigms</td>
    <td>TTh 11:00am</td>
</tr>
<tr>
    <td>SCMT 2103: Introduction to Supply Chain Management</td>
    <td>TTh 6:00pm</td>
</tr>

I want to control the visibility of this table with a button that calls a function so I think I need to be using

style="display:none";

but how do I change this in the function? I'm assuming something like

document.getElementById("classTable").style.display = "none";

but I can't find a documentation for this anywhere.

Did you try this code?

Amit
– Amit

2015-10-26 22:55:27 +00:00
Commented Oct 26, 2015 at 22:55 — Amit
– Amit, Commented Oct 26, 2015 at 22:55

ivan · Accepted Answer · 2015-10-26 22:58:40Z

1

you could do something like this on your button:

<button onclick="myFunction()">Click me</button>


<script>
function myFunction() {
    document.getElementById("classTable").style.display = "none";
}
</script>

answered Oct 26, 2015 at 22:58

ivan

1,2059 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3304654 Over a year ago

This is what I was trying to do but couldn't get it to work an now it will, thank you! To people criticizing it, anything more complicated would not go along with what we've done in class so I'm glad to have this simple version as I think it's what my professor wanted

unpollito · Accepted Answer · 2015-10-26 22:59:15Z

0

var show = true;
var table = document.getElementById('classTable');
var toggleTable = function()
{
    table.style.display = show ? 'none' : 'block';
    show = !show;
}

<table id="classTable" style="width:40%">
<tr>
    <td>WCOB 2053: Business Foundations</td>
    <td>MWF 10:45am</td>
</tr>
<tr>
    <td>MATH 2043C: Survey of Calculus</td>
    <td>MW 12:55pm</td>
</tr>
<tr>
    <td>ISYS 2103: Business Information Systems</td>
    <td>MW 4:30pm</td>
</tr>
<tr>
    <td>ISYS 2263: Principles of Information Systems</td>
    <td>TTh 9:30am</td>
</tr>
<tr>
    <td>CSCE 3193: Programming Paradigms</td>
    <td>TTh 11:00am</td>
</tr>
<tr>
    <td>SCMT 2103: Introduction to Supply Chain Management</td>
    <td>TTh 6:00pm</td>
</tr>
</table>

<button onclick="toggleTable()">Toggle table</button>

table.style.display = 'none'; works perfectly fine!

answered Oct 26, 2015 at 22:59

unpollito

1,0192 gold badges13 silver badges33 bronze badges

1 Comment

user3304654 Over a year ago

Thank you! I did try table.style.display = 'none'; before I posted here, but I guess I mistyped or something before because it definitely wasn't working. Anyway, thank you!

Collectives™ on Stack Overflow

Change HTML table style from Javascript function?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related