2016-08-20 4 views
-4

この表の空白の行を非表示にしようとしています。テーブルは一度に最大4行を表示することができます。したがって、countが2に等しい場合は、2行だけを表示したいだけです...ここでは非常に明白な何かが欠けているに違いありません。私はStackoverflowやその他のフォーラムで同様の質問をすべて見直しますが、回答はありません。 BTW ...解決策は、要素にIDを設定することではなく、getElementByIdを実行することです。私は実際にの数値を res.render()...に渡していますが、ここでは便宜上ハードコーディングしています。助けていただければ幸いです。なぜ私はUncaughtを取得していますか?Error:ここで未定義の 'style'プロパティを読み取れません。

<!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> 
+2

あなたのスクリプトはテーブルの後に来てはいけませんか? –

+1

「ディーラー」はどこから来たのですか? –

+0

ディーラーの行は無視することができますそれは実際のコードをsimplfiyingから残っていた – MichaelE

答えて

1

UPDATE:JSFIDDLEここにあなたがあなたのcount変数を変更して表示することのみtrを表示するためのコードを持っています。したがって、countが3に等しい場合、それは3だけを表示します。tr

+0

@ edisoni1337私があなたを理解している場合、DOMがロードされたときに起動するaddEventListener関数にコードを置きます。これによってstyle.displayの新しい値が有効になります?この場合、スクリプトをどこに置くかは重要ですか? – MichaelE

+0

domのロードが完了してからこのコードを配置する場所は関係ありませんが、このイベント内のコードは起動します。しかし、DOMがあなたのjsが読み込まれるまで待つ必要がないので、他の外部スクリプトを持っていても、文書の終わりに配置することをお勧めします。 –

+0

DOMロードを高速化する問題は、後にスクリプトを置くためのものです。私はあなたの提案を実際に試してみましたが、スクリプトは実行されましたが、同じエラーが発生しました.... 'undefined'のスタイルは、activerows []行が実行された後 – MichaelE

0

forの制限としてactiverowsの長さを使用する必要があります。おそらく配列が実際に持っている要素をもっと読んでいるでしょう

+0

他の人が言っていたように、あなたは管理したいhtml要素を持つ部分の後ろにあなたのスクリプトを含めるべきです。あるいは、ページが完全にロードされたときにのみコードを実行させるajax $(document).ready()を使用することもできます。 – ela

関連する問題