Databases
StackOverflow2013
Postsdbo
POShow hidden rows in table with dropdown
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow hidden rows in table with dropdown
    text
    copied!<p>I have something that seems fairly simple but I'm stumped. I want a dropdown within a table that affects how many table rows are shown. By default, only 2 rows are shown. By selecting 4 in the dropdown, 4 rows should be shown. I am only seeing one of the hidden rows show up, and I've tried to wrap the 2 rows in a hidden div as well, no luck. Ideas? </p> <pre><code> &lt;table border="1"&gt; &lt;tr&gt; &lt;td class="noBG" colspan="3"&gt; &lt;select id="displayText" onchange="javascript:toggle();"&gt; &lt;option&gt;2&lt;/option&gt; &lt;option&gt;4&lt;/option&gt; &lt;/select&gt;Items &lt;/td&gt; &lt;/tr&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Dates&lt;/th&gt; &lt;th&gt;Time&lt;/th&gt; &lt;th&gt;Person&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tr&gt; &lt;td&gt;12/3&lt;/td&gt; &lt;td&gt;12:45&lt;/td&gt; &lt;td&gt;John Doe&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;12/4&lt;/td&gt; &lt;td&gt;12:45&lt;/td&gt; &lt;td&gt;James Doe&lt;/td&gt; &lt;/tr&gt; &lt;tr id="toggleText" style="display: none"&gt; &lt;td&gt;12/4&lt;/td&gt; &lt;td&gt;12:45&lt;/td&gt; &lt;td&gt;Janey Doe&lt;/td&gt; &lt;/tr&gt; &lt;tr id="toggleText" style="display: none"&gt; &lt;td&gt;12/4&lt;/td&gt; &lt;td&gt;12:45&lt;/td&gt; &lt;td&gt;Janey Doe&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script language="javascript"&gt; function toggle() { var ele = document.getElementById("toggleText"); if(ele.style.display == "block") { ele.style.display = "none"; } else { ele.style.display = "block"; } } &lt;/script&gt; ​ </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload