使用用户输入的数组构建表 [英] Building a table using an array from user input
问题描述
我已经研究过，也许我只是错过了它，但我是javascript的新手并且仍然遇到麻烦。基本上，我需要使用来自创建数组的html表单的数据来构建表。我觉得我有点亲近，但是无法到达那里。
I have researched and researched and maybe I'm just missing it, but I'm a novice at javascript and still having trouble. Basically, I need to build a table using data from an html form that creates an array. I feel like I'm kinda close, but just can't get there.
<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>
推荐答案
我经常使用以下 tableMaker 函数生成表格HTML。所以下面的代码将为您生成一个表。泛型 tableMaker 函数接受第一个参数中提供的对象数组或多个对象数组。所有对象都应具有相同的键（属性），因为这些键用于创建表头（如果第二个参数设置为true），并且这些值用于创建每一行。它将返回一个HTML表格文本。
I often use the following tableMaker function to generate table HTML. So the below code will generate a table for you. The generic tableMaker function takes an array of an object or an array of multiple objects provided in the first argument. All objects should have same keys (properties) since these keys are used to create the table header (if the second argument is set to true) and the values are used to create each row. It will return an HTML table text.
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);
这篇关于使用用户输入的数组构建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
