时间戳

首页 > 解决方案 > 使用数组通过for循环方法通过JavaScript创建表

javascript - 使用数组通过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>

标签： javascripthtml

解决方案

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>

推荐阅读