2017-06-21 2 views
-2

Ich brauche Hilfe, weil ich eine Tabelle erstellen muss, um eine andere Tabelle zu öffnen, wenn ich eine Zelle auswähle. Ich muss dies in HTML oder JavaScript tun.Tabelle öffnen Sie eine andere Tabelle, wenn ich eine der Zellen wählen HTML

Ich habe eine Tabelle mit einigen Zellen, die Daten haben, und wenn ich eine von dann wählen, brauche ich andere Tabelle mit anderen Daten unten zu öffnen.

Kann mir jemand eine Idee geben, wie kann ich das machen?

Antwort

0

Eine Sache, die Sie tun können, ist die andere Tabelle bereits darunter zu haben, und mit CSS, ändern Sie die display zu none und dann lassen Sie es später mit JavaScript ausführen. Hier ist mein Code in JQuery getan:

$("#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>

Hier ist meine regelmäßige 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> 

Sie es in reinem Javascript tun können ;)

+0

Vielen Dank, Bruder. Diese Codes retten mich und gaben mir ein Licht von meiner Tätigkeit in meinem Büro. Vielen Dank! –

Verwandte Themen