2016-07-27 10 views
-1

Ich habe recherchiert und recherchiert und vielleicht ich vermisse es nur, aber ich bin ein Anfänger bei Javascript und immer noch Probleme. Im Grunde muss ich eine Tabelle erstellen, die Daten aus einem HTML-Formular verwendet, das ein Array erstellt. Ich fühle mich wie ein bisschen nah, aber ich komme einfach nicht hin.Erstellen einer Tabelle mit einem Array von Benutzereingabe

<script type="text/javascript"> 
 
      var flights = []; 
 
      var miles = []; 
 
    
 
      function getInfo() { 
 
       flights.push(document.getElementById('flight').value); //add flight info element to array 
 
       miles.push(document.getElementById('miles').value); //add miles info element to array 
 
       document.getElementById('flight').value =''; 
 
       document.getElementById('miles').value =''; //initial text box is blank 
 
       
 
       
 
       } 
 
       
 
       
 
       
 
       
 
       function disp(){ 
 
       \t 
 
       var sum = 0; 
 
       
 
       for (var i=0; i < miles.length; i++){ 
 
       \t sum = sum + miles[i]; 
 
       \t 
 
       } 
 
       
 
       var table = document.createElement("TABLE"); 
 
       document.body.appendChild(table); 
 
       
 
       for(var i=0; i < flights.length; i++){ 
 
       \t 
 
       \t var row = document.createElement("TR"); 
 
       \t var flightCell = document.createElement("TD"); 
 
       \t var milesCell = document.create Element("TD"); 
 
       \t 
 
       \t document.createTextNode(flights[i]); 
 
       \t document.createTextNode(miles[i]); 
 
       \t 
 
       \t flightCell.appendChild(flights); 
 
       \t milesCell.appendChild(miles); 
 
       \t 
 
       \t row.appendChild(flights); 
 
       \t row.appendChild(miles); 
 
       \t 
 
       \t table.appendChild(row); 
 
       } 
 
      } 
 
     </script>
<style> 
 
td 
 
{border-left:1px solid black; 
 
border-top:1px solid black;} 
 
table 
 
{border-right:1px solid black; 
 
border-bottom:1px solid black;} 
 

 
</style>
<html> 
 

 
<head> 
 
     <title>array form test</title> 
 
</head> 
 
    <body> 
 
     Flight # 
 
     <input type="text" id="flight" /> 
 
     Miles Flown 
 
     <input type="text" id="miles" /> 
 
     <br /> 
 
     <input type="button" value="Add Flight Info"  onclick="getInfo();disp()" /> 
 
     <br /> 
 
     
 

 

 

 

 

 
    </body> 
 
    </html>

+1

Sie keine Frage haben ... Was ist das Problem? –

+0

Nicht im QA-Format. Bitte bearbeiten Sie Ihre Frage –

Antwort

1

Ich benutze oft die folgende tableMaker Funktionstabelle HTML zu erzeugen. Der folgende Code generiert eine Tabelle für Sie. Die generische tableMaker-Funktion nimmt ein Array eines Objekts oder ein Array mehrerer Objekte, die im ersten Argument enthalten sind. Alle Objekte sollten dieselben Schlüssel (Eigenschaften) haben, da diese Schlüssel zum Erstellen des Tabellenheaders verwendet werden (wenn das zweite Argument auf "true" gesetzt ist) und die Werte zum Erstellen jeder Zeile verwendet werden. Es wird ein HTML-Tabellentext zurückgegeben.

var tableMaker = (o,h) => {var keys = Object.keys(o[0]), 
 
          rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>" 
 
                          : "<" + t + ">" + c + "</" + t + ">"),"<tr>"), 
 
          rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []); 
 
          return "<table>" + rows + "</table>"; 
 
          }; 
 
     myCars = [{Pos: 1, Make: "Toyota"}, {Pos: 2, Make: "Volvo"}, {Pos: 3, Make: "BMW"}, {Pos: 4, Make: "Mercedes"}] , 
 
     table = tableMaker(myCars,true); // if second argument provided as truthy then headers generated 
 
document.write(table);