Question

我已经研究过，也许我只是错过了它，但我是javascript的新手并且仍然遇到麻烦。基本上，我需要使用来自创建数组的html表单的数据来构建表。我觉得我有点亲近，但是无法到达那里。

＆＃13;

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

＆＃13;

<style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}

</style>

＆＃13;

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

＆＃13;

Answer 1

我经常使用以下tableMaker函数来生成表格HTML。因此，下面的代码将为您生成一个表。泛型tableMaker函数接受第一个参数中提供的对象数组或多个对象数组。所有对象应具有相同的键（属性），因为这些键用于创建表头（如果第二个参数设置为true），并且这些值用于创建每一行。它将返回HTML表格文本。

＆＃13;

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

＆＃13;

使用用户输入

1 个答案: