javascript表格菜單打開，所有的表已經崩潰了，爲什麼？

我有一個簡單的菜單，包含摺疊表，使用Javascript。我的問題是當我在瀏覽器中打開它時，所有表已經崩潰！我怎樣才能打開菜單部分「關閉」，然後摺疊每個部分只onclick？我知道這是在JavaScript中，但我是新來的，所以忍受着我......謝謝！javascript表格菜單打開，所有的表已經崩潰了，爲什麼？

這裏的基本代碼：

<head> 
<script> 
function doCollapse(rowname) 
{ 
theElement = document.getElementById(rowname); 
if(theElement.style.display == 'none'){ 
theElement.style.display = ''; 
}else { 
theElement.style.display = 'none'; 
} 
return false; 
} 
</script> 
</head> 


<body> 
<table> 
<tr> 
    <td> 
    <p1 onClick=" doCollapse ('r1');">JQ</p> 
    </td></tr> 
<tr> 
    <td id="r1">ver biografia</td></tr> 

<tr> 
    <td> 
    <p2 onClick=" doCollapse ('r2');">Obras</p> 
</td> 
</tr> 
<tr> 
<td id="r2">lista</td></tr> 

<tr> 
    <td> 
<p3 onClick=" doCollapse ('r3');">Exposições</p> 
    </td> 
</tr> 
<tr> 
    <td id="r3">lista</td></tr> 

</table> 
</body> 
</code>

來源

2012-09-30 user1710248

我可以建議糾正你的HTML'p1'，'p2'和'p3'是*不* HTML元素（使用'p'，元素，你'*結束* *）。這不是（或者很不可能是）你的問題，但是如果你打算使用HTML，請*正確使用它。否則的話，錯誤處理會讓所有的東西比需要的更困難。當然是 –

！ p_nr沒有任何意義...... – user1710248

由於您使用純JavaScript，而不是像jquery圖書館，我建議了幾個修改，輕鬆鎖定你的元素。嘗試將項目顯示並隱藏在span之內，以便您可以使用document.getElementsByTagName，然後將Id添加到這些跨度而不是td。我擔心你的代碼中有更多td，所以你使用document.getElementsByTagName也會影響它們，這不是你所需要的。但是，如果您的代碼中有更多的跨度，很可能您需要小心，我的解決方案也會受到副作用的影響，因此您需要在實施此實際操作之前考慮此問題。下面是代碼，你可以看到一個live demo here

<head> 
<script> 
    function init(){ 
     var numberOfRows = document.getElementsByTagName('span').length; 
     for (var i = 0; i < numberOfRows; i++){ 
     document.getElementsByTagName('span')[i].style.display = 'none'; 
     } 

    } 

function doCollapse(rowname) 
{ 
theElement = document.getElementById(rowname); 
if(theElement.style.display == 'none'){ 
theElement.style.display = 'inline'; 
}else { 
theElement.style.display = 'none'; 
} 
return false; 
} 
</script> 
</head> 


<body onload="init()"> 
<table> 
<tr> 
    <td> 
    <p onClick=" doCollapse ('r1');">JQ</p> 
    </td></tr> 
<tr> 
    <td><span id="r1">ver biografia</span></td></tr> 

<tr> 
    <td> 
    <p onClick=" doCollapse ('r2');">Obras</p> 
</td> 
</tr> 
<tr> 
<td><span id="r2">lista</span></td></tr> 

<tr> 
    <td> 
<p onClick=" doCollapse ('r3');">Exposições</p> 
    </td> 
</tr> 
<tr> 
    <td><span id="r3">lista</span></td></tr> 

</table>

來源

2012-09-30 20:11:58 hsalama

javascript表格菜單打開，所有的表已經崩潰了，爲什麼？

回答

相關問題