0

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

假设我不能使用 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>

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

有没有办法在显示属性更改时按需加载这些标签？我读过关于延迟加载的文章，但无法让它与它一起工作。

请尝试尽可能简单地解释它，因为我完全没有经验:-)

4

2 回答 2

0

由于 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';
            }
        }
    }
}
于 2013-06-17T12:39:43.840 回答
0

不能有延迟加载。您的循环将一直运行到最后。如果找到了 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>

或者您可以通过 id 找到特定元素并根据需要进行切换。但这会被推荐。

    var trobj = document.getElementById(trId);
    if (var != null)
    {
     // toggle code here
    }
于 2013-06-17T12:44:32.627 回答