2017-06-21 15 views
-2

セルを選択するときに別のテーブルを開くためにテーブルを作成する必要があるため、助けが必要です。 HTMLやJavaScriptでこれを行う必要があります。テーブルセルを選択すると別のテーブルが開きます

私はデータを持っていると私は、その後のいずれかを選択したときに、私は以下開くために、他のデータと他のテーブルを必要とするいくつかのセルを持つテーブルがあります。

誰かが私に私はこれを行うことができる方法のアイデアを与えることはできますか?

答えて

0

あなたができることの1つは、もう1つのテーブルがすでにその下にあり、CSSでdisplaynoneに変更してから、JavaScriptで後で実行させることです。ここに私のコードはjQueryの中で行われます。ここでは

$("#tableOne").click(function() { 
 
    $("#tableTwo").css("display", "block"); 
 
});
#tableTwo { 
 
display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id = "tableOne"> 
 
    <tr> 
 
    <td> 
 
     <button id = "demo">Click Me!</button> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<table id = "tableTwo"> 
 
    <tr> 
 
    <td> 
 
     <p>Yay!</p> 
 
    </td> 
 
    </tr> 
 
</table>

は私の通常のJavaScriptです:

  var demo = document.getElementById("demo"); 
 
      demo.onclick = function() { 
 
       document.getElementById("tableTwo").style.display = "block"; 
 
      }
#tableTwo { 
 
    display: none; 
 
}
<table id = "tableOne"> 
 
     <tr> 
 
     <td> 
 
      <button id = "demo">Click Me!</button> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <table id = "tableTwo"> 
 
     <tr> 
 
     <td> 
 
      <p>Yay!</p> 
 
     </td> 
 
     </tr> 
 
    </table>

0
<html> 
<head> 
    <script> 
     function displaySecondTable(){ 
      document.getElementById("tableTwo").innerHTML=" (here is the code for your second table) "; 
     }  
    </script> 
</head> 

    <body> 

    <table id = "tableOne"> 
     <tr> 
     <td onclick="displaySecondTable()"> 
      Click here 
     </td> 
     </tr> 
    </table>  

    <table id = "tableTwo" /> 

</body> 
</html> 

あなたは純粋なJavaScriptでそれを行うことができます;)

+0

ありがとう、兄。 このコードは私を救い、私のオフィスで私の活動から私に光を与えました。 ありがとう! –

関連する問題