Why am I getting Uncaught TypeError: Cannot read property 'style' of undefined here

Question

我试图隐藏此 table 中的空白行。 table 一次最多可以显示 4 行，所以如果 count 等于 2，我只想显示 2 行......我一定错过了一些非常明显的东西。我在 Whosebug 和其他论坛上查看了所有类似的问题，但 none 提供了一个答案...任何人都可以看到这里的问题是什么。顺便说一句...解决方案不是为元素设置 ID 并执行 getElementById..我试过了。我实际上是在 res.render() 中传递 count 变量...但为方便起见，此处进行了硬编码。如果有任何帮助，我将不胜感激。

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8"> 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="/socket.io-client/socket.io.js"></script>

 <style>

    body {
        margin-top:30px;
    }
    .hidden {
        display: none;
    }

 </style>
 <script type="text/javascript">
    var count=2;

    var activerows=document.getElementsByClassName("hidden");



    for (var i=0; i<activerows.length; i++) {
        activerows[i].style.display='block';
     }

 </script>
</head>
<body>
    <div class="container">
     <div class="row">
      <div class="col-md-8">

        <table class="table table-striped table-border" id="dealers">

            <tbody>

                <tr class="hidden active">
                    <th>A</th>    
                    <th>B</th>  
                    <th>C</th>
                    <th>D</th>
                </tr>
                <tr class="hidden">
                    <td>1</td>
                    <td>2/td>
                    <td>3</td>
                    <td>4m</td>
                </tr>
                 <tr class="hidden">
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr class="hidden">
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                </tr>

            </tbody>
        </table>
      </div>
      <div class="more" id="more">
        <button type="submit" class="fbtn btn-default">More....</button>    
      </div>


     </div>

    </div>
</body>
</html>

Answer 1

更新：JSFIDDLE 此处您的代码仅显示 tr 您希望通过更改 count 变量来显示的代码。所以如果 count 等于 3 它将只显示 3 tr

Answer 2

您应该使用 activerows 长度作为 for 的限制。可能您正在阅读数组实际具有的更多元素

Why am I getting Uncaught TypeError: Cannot read property 'style' of undefined here

Why am I getting Uncaught TypeError: Cannot read property 'style' of undefined here

html

javascript

ejs