使用来自用户输入的数组构建表答案

【问题标题】：Building a table using an array from user input使用来自用户输入的数组构建表
【发布时间】：2016-12-02 03:11:57
【问题描述】：

我进行了研究和研究，也许我只是想念它，但我是 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(){
               	
               var sum = 0;
               
               for (var i=0; i < miles.length; i++){
               	sum = sum + miles[i];
               	
               }
                
                var table = document.createElement("TABLE");
                document.body.appendChild(table);
                
                for(var i=0; i < flights.length; i++){
                	
                	var row = document.createElement("TR");
                	var flightCell = document.createElement("TD");
                	var milesCell = document.create Element("TD");
                	
                	document.createTextNode(flights[i]);
                	document.createTextNode(miles[i]);
                	
                	flightCell.appendChild(flights);
                	milesCell.appendChild(miles);
                	
                	row.appendChild(flights);
                	row.appendChild(miles);
                	
                	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>

【问题讨论】：

你没有问任何问题...有什么问题？
不是 QA 格式。请编辑您的问题

标签： javascript arrays html-table

【解决方案1】：

我经常使用下面的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);

【讨论】：