使用用戶輸入的數組構建表格

-1

我已經研究過，也許我只是想念它，但我是JavaScript的新手，仍然有麻煩。基本上，我需要使用創建數組的html表單中的數據構建表。我覺得我有點兒接近，但不能到達那裏。使用用戶輸入的數組構建表格

<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>

來源

2016-07-27 KCampbell

你沒問任何問題......這是什麼問題？ –

未採用QA格式。請編輯你的問題 –

我經常使用下面tableMaker函數生成表HTML。所以下面的代碼會爲你生成一個表格。通用tableMaker函數接受第一個參數中提供的一個對象數組或一個由多個對象組成的數組。所有對象都應具有相同的鍵（屬性），因爲這些鍵用於創建表頭（如果第二個參數設置爲true）並且這些值用於創建每一行。它將返回一個HTML表格文本。

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);

來源

2016-07-28 05:19:18 Redu

使用用戶輸入的數組構建表格

回答

相關問題