Load parts of page on demand without jquery

Question

I am completely new to web design and I am experimenting with few things.

Lets assume that I can't use jquety and I can't upload any file to the page, instead I can use simple javascript.

What I have now is a table with few tags, and a javascript function to show based on checkboxes.

Script

 <script language="javascript">
function toggleTR(trId) {
    var trArray = document.getElementsByTagName("tr");
    for(i = 0; i < trArray.length; i++){
        if(trArray[i].id == trId){
            if(trArray[i].style.display == 'none'){
                trArray[i].style.display = '';
            }else{
                trArray[i].style.display = 'none';
            }
        }
    }
}
</script>

Checkbox

<input type="checkbox" onClick="toggleTR('TR1');"/> TR1

And simple table

<table>
<tr id="TR1" style="display: none;">
<td>content</td>
</tr>
</table>

It works as intended, however as the page gets bigger the load time is horrible.

Is there a way for those tags to be loaded on demand when display attribute is changed? I've read about lazy load, but could not get it to work with this.

Please try to explain it as easy as it could be, as I am totally inexperienced :-)

Answer 1

As ID should be unique, this should be more optimised

function toggleTR(trId) {
    var tr= document.getElementById(trId);
    if(tr != null){
        if(tr.style.display == 'none'){
            tr.style.display = '';
        }else{
            tr.style.display = 'none';
        }
    }
}

And if you don't want to hide/show unique element, then you can use classes.

<table>
<tr class="TR1" style="display: none;">
<td>content</td>
</tr>
</table>

and

function toggleTR(trClass) {
    var tr= document.querySelectorAll('.'+trClass);
    if(tr != null){
        for(var i = 0, l = tr.length; i < l ; i++){
            if(tr[i].style.display == 'none'){
                tr[i].style.display = '';
            }else{
                tr[i].style.display = 'none';
            }
        }
    }
}

Answer 2

There can't be lazy load. Your loop will keep on running till the end. Give a break statement if the id is found., so that the rest of th loop doesn't run.

    <script language="javascript">
    function toggleTR(trId) {
            var trArray = document.getElementsByTagName("tr");
            for(i = 0; i < trArray.length; i++){
            if(trArray[i].id == trId){
                if(trArray[i].style.display == 'none'){
                    trArray[i].style.display = '';
                }else{
                    trArray[i].style.display = 'none';
                }
                break;
            }
        }
    }
    </script>

OR You can find the particular element by id and toggle as desired. This would be recommended though.

    var trobj = document.getElementById(trId);
    if (var != null)
    {
     // toggle code here
    }