Question

我对网页设计完全陌生，我正在尝试一些事情。

让我们假设我不能使用jquety而且我无法将任何文件上传到页面，而是可以使用简单的javascript。

我现在拥有的是一个包含很少标签的表格，以及一个基于复选框显示的javascript函数。

脚本

 <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>

复选框

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

简单的表

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

它按预期工作，但随着页面变大，加载时间变得非常糟糕。

当显示属性发生变化时，有没有办法按需加载这些标签？我已经阅读了关于延迟加载的内容，但无法使用它。

请尽量解释它，因为我完全缺乏经验:-)

Answer 1

由于ID应该是唯一的，因此应该更加优化

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

如果您不想隐藏/显示唯一元素，那么您可以使用类。

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

和

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

不能有懒惰的负载。你的循环将继续运行直到结束。如果找到了id，则给出一个break语句。这样就不会运行其余的循环。

    <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 您可以按ID找到特定元素并根据需要切换。但建议这样做。

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

在没有jquery的情况下按需加载页面部分

2 个答案: