Hiding odd rows in a table on click event Problem Statement


  Write JavaScript code hideOddRows.js that attaches to the button click event and hides the odd rows of the table when clicked.


Expected Output


  


When you click on "Hide Odd Rows":


  






Solution



/* hideOddRows.js */
document.querySelector('[name=HideRows]').onclick = hideRows;

function hideRows(){
    var elements = document.getElementsByClassName('hide');
    Array.prototype.forEach.call(elements, function(element){
        element.style.display = "none";
    });
    return true;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Hide odd rows&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div style="background-color:#8F9779;width:200px;height:30px;"&gt;
        &lt;/div&gt;
        &lt;hr style="width:200px" align="left"&gt;
        &lt;table border="1" &gt;
            &lt;tr class="hide" &gt;
                &lt;td width="40" height="20"&gt;row 1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 2&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="hide"&gt;
                &lt;td width="40" height="20"&gt;row 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 4&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr class="hide"&gt;
                &lt;td width="40" height="20"&gt;row 5&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;&lt;br&gt;
        &lt;button type="button" name="HideRows"&gt;Hide Odd Rows&lt;/button&gt;
        &lt;script type="text/javascript" src="hideOddRows.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;




Questions


I could not manage to place script tag in head due to DOM loading issue. How do I improve this solution to place script tag in head?
Can I improve the HTML code?


Note: I've yet to learn jQuery.
Your JavaScript is OK, but beware of writing code where you can get away without it.  In this case, there is a CSS3 :nth-child() selector1 that lets you select odd rows without tagging them manually with class="hide".

You just have to trigger the CSS rule when the button is pressed.  Note that if you want to select one specific element in a document, it's better to mark it using id="…" and select it using document.getElementById(…) — that's exactly what it is designed to do, and browsers will optimize ID lookups to be as fast as possible.



/* hideOddRows.js */
document.getElementById('HideRows').onclick = function hideRows() {
    document.getElementsByTagName('table').item(0).className = 'odd-rows-hidden';
}
table.odd-rows-hidden tr:nth-child(odd) {
    display: none;
}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Hide odd rows&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div style="background-color:#8F9779;width:200px;height:30px;"&gt;
        &lt;/div&gt;
        &lt;hr style="width:200px" align="left"&gt;
        &lt;table border="1" &gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 1&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 2&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 4&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td width="40" height="20"&gt;row 5&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;&lt;br&gt;
        &lt;button type="button" id="HideRows"&gt;Hide Odd Rows&lt;/button&gt;
        &lt;script type="text/javascript" src="hideOddRows.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;






1 Caveat: requires Internet Explorer ≥ 9.  If you need to support older versions of IE, you'll probably want jQuery.