Wie erstellen Sie eine Tabelle in Javascript

Question

Ich versuche, eine einfache Sache zu schaffen, also lass mich versuchen zu erklären, wo es heißt "Tabelle hier" soll eine Tabelle mit 4 Spalten und 6 Zeilen natürlich mit Inhalt innerhalb erscheinen Zellen.

Leider weiß ich nicht, wie machen Sie das in Javascript.

-Code, die ich schon unten haben:

---

 <form name="part"> 
     <p align="center"> 
     &nbsp;</p> 
     <p align="center"> 
     <font face="Verdana" size="2">Please insert the part ID in the field 
     below:</font></p> 
     <p align="center"> 
     <font face="Verdana" size="2">Part ID</font><font face="Verdana"><font size="2"> </font><input type="text" name="userid" size="19"/></font></p> 
     <p align="center"><font face="Verdana"><font size="2"> 
     <p align="center"> 
     <input type="button" onclick="check(this.form)" value="Check now" style="font-family: Verdana"/><font face="Verdana" size="2"> 
     </font> 
     <input type="reset" value="Cancel" style="font-family: Verdana"/></p> 
    </form> 
    <font face="Verdana" size="2"> 
    <script language="javascript"> 
     function check(form) { 
      if(form.userid.value == "1"){ 
       document.write("table here"); 
      } 
      else if(form.userid.value == "2"){ 
       document.write("table 2 here"); 
      } 
      else { 
       alert("The Part does not esxist\nor does not have compatibility") } 
     } 
    </script> 

---

Ich hoffe, dass Sie mir helfen können! :)

Answer 1

Es gibt viele Möglichkeiten, um eine Tabelle in Javascript zu erstellen, aber wahrscheinlich die grundlegendste, die keine externen Bibliotheken benötigt:

von Code:

var $table  = document.createElement('table'); 
var $table_row = document.createElement('tr'); // for each row 
var $table_cell = document.createElement('td'); // for each cell 

$table.appendChild($table_row);  // for each row 
$table_row.appendChild($table_cell); // for each cell 

document.body.appendChild($table); // eventually add the final table 

von HTML :

<table> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
     <td>Cell 3</td> 
    </tr> 
</table> 

gibt es andere externe Bibliotheken, die Ihnen helfen könnten, b Das ist das Messing.

einige hilfreiche (unverwässert) css könnte in der Regel sein:

table{ 
    width : 100%; 
    border-spacing : 0px; 
    border-collapse : collapse; 
} 

/* and then styling the inner cells */ 

table td{ 
    padding : 3px; /* or whatever suits you */ 
    border : 1px solid #efefef; 
} 

etc ...

Externe Bibliotheken wie https://datatables.net/ würden Sie daran ein Array (oder Array von Objekten helfen) und verwandelt es in eine Tabelle ... bietet Funktionen wie Sortieren, Suchen, Seitenumbruch (Paging) ...

so dass ein Array, das aussieht wie folgt aus:

var data = [ 
    { name : "david", "age" : 25, "sign" : "aries" }, 
    { name : "daniel", "age" : 32, "sign" : "whatever" }, 
    { name : "motke", "age" : 18, "sign" : "falafel" } 
]; 

würde

Namen wie diese zu einem vollständig aussehenden Tisch umgewandelt werden | Alter | Zeichen |
------------------------ |
David | 25 | Widder |
Daniel | 32 | was auch immer
Motke | 18 | Falafel |

pardon meine armen Textzeichnerischen Fähigkeiten ...

Wenn Sie dies auf die nächste Stufe nehmen mögen, dass Sie immer Daten gebunden Frameworks wie modular.js nutzen könnten - http://modularjs.co.nf/ - oder Winkel HTML Tamplates zu erzeugen, in die Likes wie:

<table> 
    <tr for="item in data"> 
     <td>{{item.name}}</td> 
     <td>{{item.age}}</td> 
     <td>{{item.sign}}</td> 
    </tr> 
</table> 

, die Ihnen mehr Kontrolle darüber geben, wie die Daten angezeigt werden. Vor- und Nachteile in jeder Lösung, einfach wählen!