使用数组通过 for 循环方法通过 JavaScript 创建表

我需要帮助通过数组创建一个表格，并将各个部分分隔到不同的类别中。我正在使用 for 循环。现在我得到了表格表格，但我需要帮助分隔不同的字段。这是我到目前为止得到的。

<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
<!--
var rawteamstats = new Array;
rawteamstats[0] = [Teams:"Sharks",Wins:"3",Loss:"1",Ties:"2"];
rawteamstats[1] = [Teams:"Jets",Wins:"2",Loss:"4",Ties:"1"];
rawteamstats[2] = [Teams:"AppleDumplings",Wins:"3",Loss:"3",Ties:"1"];
rawteamstats[3] = [Teams:"MightyShrimp",Wins:"1", Loss:"5",Ties:"0"];
rawteamstats[4] = [Teams:"Volcano",Wins:"2", Loss:"2",Ties:"2"];
rawteamstats[5] = [Teams:"Phoniox",Wins:"2",Loss:"3",Ties:"1"];
	
//-->
</script>
	<title>Baseball Standing</title>
</head>
<body>
	
	<p id="demo"></p>
	<script>
	
	var rawteamstats, text, TLen, i;
tLen = rawteamstats.length;
text = "<table border=1>";
for (i = 0; i < tLen; i++) {
text += "<tr>"+"<td>" + rawteamstats[i] + "</td>"+"</tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;
	</script>
</body>
</html>

var rawteamstats = new Array;
var header = ["Teams", "Wins", "Loss", "Ties"];
rawteamstats[0] = {
Teams: "Sharks",
Wins: "3",
Loss: "1",
Ties: "2"
};
rawteamstats[1] = {
Teams: "Jets",
Wins: "2",
Loss: "4",
Ties: "1"
};
rawteamstats[2] = {
Teams: "AppleDumplings",
Wins: "3",
Loss: "3",
Ties: "1"
};
rawteamstats[3] = {
Teams: "MightyShrimp",
Wins: "1",
Loss: "5",
Ties: "0"
};
rawteamstats[4] = {
Teams: "Volcano",
Wins: "2",
Loss: "2",
Ties: "2"
};
rawteamstats[5] = {
Teams: "Phoniox",
Wins: "2",
Loss: "3",
Ties: "1"
};
var rawteamstats, text, TLen, i;
let tableHTML = "<table id='tab'><thead>";
header.forEach(function(head) {
tableHTML += "<th>" + head + "</th>";
});
tableHTML += "</thead><tbody>";
rawteamstats.forEach(function(obj){
tableHTML += "<tr>";
var keys = Object.keys(obj);
keys.forEach(function(key){
tableHTML += "<td>" + obj[key] + "</td>";
});
tableHTML += "<tr>";
});
tableHTML += "</tbody></table>";
document.getElementById("demo").innerHTML = tableHTML;

#tab {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#tab td, #tab th {
border: 1px solid #ddd;
padding: 8px;
}
#tab tr:nth-child(even){background-color: #f2f2f2;}
#tab tr:hover {background-color: #ddd;}
#tab th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}

<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Baseball Standing </title>
</head>
<body>
<p id="demo"></p>
</body>
</html>

你真的很接近，我会为你指出正确的方向，你想要的代码看起来像这样：

<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
var rawteamstats = new Array;
rawteamstats[0] = {Teams: "Sharks", Wins: "3", Loss: "1", Ties: "2"};
rawteamstats[1] = {Teams: "Jets", Wins: "2", Loss: "4", Ties: "1"};
rawteamstats[2] = {Teams: "AppleDumplings", Wins: "3", Loss: "3", Ties: "1"};
rawteamstats[3] = {Teams: "MightyShrimp", Wins: "1", Loss: "5", Ties: "0"};
rawteamstats[4] = {Teams: "Volcano", Wins: "2", Loss: "2", Ties: "2"};
rawteamstats[5] = {Teams: "Phoniox", Wins: "2", Loss: "3", Ties: "1"};
</script>
<title>Baseball Standing</title>
</head>
<body>
<p id="demo"></p>
<script>
var text, TLen, i;
tLen = rawteamstats.length;
text = "<table border=1>";
for (i = 0; i < tLen; i++) {
text += "<tr>" + "<td>" + rawteamstats[i].Teams + "</td>" + "</tr>";
}
text += "</table>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

在定义数组的第一个脚本标记中，而不是：

rawteamstats[0] = [Teams: "Sharks", Wins: "3", Loss: "1", Ties: "2"];

你想要，因为它是一个对象：

rawteamstats[0] = {Teams: "Sharks", Wins: "3", Loss: "1", Ties: "2"};

接下来，在第二个脚本标记中，您有：

var rawteamstats, text, TLen, i;

您希望从中删除原始团队统计信息，因为您要重新定义已在第一个脚本标记中创建的内容：

var text, TLen, i;

接下来，您要获取您创建的该对象的特定属性，在我提供的示例中，我只获取 Teams 属性，我相信您也需要它们的统计信息：

text = "<table border=1>";
for (i = 0; i < tLen; i++) {
text += "<tr>" + "<td>" + rawteamstats[i].Teams + "</td>" + "</tr>";
}
text += "</table>";

这是一个用户定义函数的实现，用于根据您的问题绘制给定对象数组的表。请记住在将值分配为 JavaScript 对象时使用大括号 {}。

剩下的就是操作JavaScript对象来获取键和值，以及使用循环来自动重复代码块。

<!DOCTYPE HTML>
<html lang="en">
<head>
<script type="text/javascript">
<!--
var rawteamstats = [];
rawteamstats[0] = {Teams:"Sharks",Wins:"3",Loss:"1",Ties:"2"};
rawteamstats[1] = {Teams:"Jets",Wins:"2",Loss:"4",Ties:"1"};
rawteamstats[2] = {Teams:"AppleDumplings",Wins:"3",Loss:"3",Ties:"1"};
rawteamstats[3] = {Teams:"MightyShrimp",Wins:"1", Loss:"5",Ties:"0"};
rawteamstats[4] = {Teams:"Volcano",Wins:"2", Loss:"2",Ties:"2"};
rawteamstats[5] = {Teams:"Phoniox",Wins:"2",Loss:"3",Ties:"1"};
function drawTable(arrayOfObjects){
	var tableText="<table border=1>";
	var headerSet=false;
	for(let row of arrayOfObjects){
		var rowData='';
		if(!headerSet){
			var keys=Object.keys(row);
			for(let key of keys){
				rowData+="<th>"+key+"</th>";
			}
			rowData="<tr>"+rowData+"</tr>";
			headerSet=true;
			tableText+=rowData;
			rowData="";
		}
		var values=Object.values(row);
		for(let data of values){
			rowData+="<td>"+data+"</td>";
		}
		tableText+="<tr>"+rowData+"</tr>";
	}
	tableText+="</table>";
	return tableText;
}
	
//-->
</script>
	<title>Baseball Standing</title>
</head>
<body>
	
	<p id="demo"></p>
	<script>
	
	document.getElementById("demo").innerHTML = drawTable(rawteamstats);
	</script>
</body>
</html>

相关内容

最新更新

热门标签：