Fatal编程技术网
  • javascript/
  • Javascript表格菜单打开时，所有表格都已折叠，为什么？

Javascript表格菜单打开时，所有表格都已折叠，为什么？

javascript

Javascript表格菜单打开时，所有表格都已折叠，为什么？,javascript,html-table,Javascript,Html Table,我有一个简单的菜单和折叠表，使用Javascript。我的问题是，当我在浏览器中打开它时，所有表都已折叠！如何在菜单部分“关闭”的情况下打开它，然后只单击一次就折叠每个部分？我知道它在Javascript中，但我是新手，所以请容忍我。。。谢谢大家! 以下是基本代码： <head> <script> function doCollapse(rowname) { theElement = document.getElementById(rowname); if(theElem

我有一个简单的菜单和折叠表，使用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>


函数doCollapse（rowname）
{
theElement=document.getElementById（rowname）；
如果（theElement.style.display=='none'）{
theElement.style.display=''；
}否则{
theElement.style.display='none'；
}
返回false；
}
JQ

罗非鱼
奥布拉斯

利斯塔
暴露

利斯塔
因为您使用的是纯javascript，而不是像库一样的库，所以我建议您进行一些修改，以便轻松地针对您的元素。尝试将要显示和隐藏的项目放置在
span
中，以便您可以使用
document.getElementsByTagName
，然后将Id添加到这些span中，而不是在
td
上。我担心的是，您的代码中有更多的
td
，因此您使用
document.getElementsByTagName
也会影响它们，这不是您所需要的。但是，您需要小心，如果您的代码中有更多的跨度，那么我的解决方案也会受到这种副作用的影响，这很可能，因此您需要在实现此live之前考虑到这一点。这是代码，您可以看到


函数init（）{
var numberOfRows=document.getElementsByTagName（'span'）.length；
对于（变量i=0；i
罗非鱼
Obras

利斯塔
展览

利斯塔
我可以建议您更正HTML
p1
，
p2
和
p3
不是HTML元素（请使用您要关闭的元素
p
）。这不是（或者不太可能是）您的问题，但是如果您要使用HTML，请正确使用它。否则，错误处理会使一切变得更加困难。当然！p_nr没有任何意义。。。 
<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>