JS两种方法和警示:遍历数组内容打印到div框，表格，商品下拉框，对象数组，跳转，赋值
题目：创建一个表格，有商品名称，价格，数量 三个文本框，种类下拉列表，下拉列表使用js进行赋值，添加一个按钮，点击按钮后将所有内容添加到一个对象数组中，添加另一个按钮遍历商品信息，点击按钮后将数组中所有的内容遍历到一个div中
我写出和给出的答案：
方法一（改进常用版）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#allDivId{
width: 666px;height:233px;
border: 1px solid blue;
margin: 0 auto;
text-align: center;
}
table {
width: 666px;
height: 400px;
margin: 0px auto;
text-align: center;
border-top: solid 1px red;
border-left: solid 1px red;
background-color: blue;
}
td {
border-bottom: 1px solid red;
border-right: 1px solid red;
}
</style>
<script>
window.onload=function() {
var trShuZuVar = document.getElementsByTagName("tr");
for(var xiaBiao of trShuZuVar) {
xiaBiao.onmouseover = function() {
this.style.backgroundColor = "yellow";
}
xiaBiao.onmouseout = function() {
this.style.backgroundColor = "blue";
}
}
window.sp = function(name, jiaGe, shuLiang, zhongLei) {
this.name = name;
this.jiaGe = jiaGe;
this.shuLiang = shuLiang;
this.zhongLei = zhongLei;
}
window.shangpins = [];
window.tables = document.getElementById("tableId");
createType();
}
function createType() {
var typeShuZu = ["水果类", "书籍类", "食品类"];
var selects = window.tables.getElementsByTagName("select");
for(var i of typeShuZu) {
var createTypeXiaLaKuang = document.createElement("option");
createTypeXiaLaKuang.setAttribute("value", i);
createTypeXiaLaKuang.innerHTML = i;
selects[0].appendChild(createTypeXiaLaKuang);
}
}
function addDuiXiang() {
var inputShuZu = document.getElementsByTagName("input");
var selectIndexVar = window.tables.getElementsByTagName("select")[0].selectedIndex;
var selectValue =
window.tables.getElementsByTagName("select")[0].options[selectIndexVar].value;
var shangPingDuiXiang
= new sp(inputShuZu[0].value, inputShuZu[1].value, inputShuZu[2].value, selectValue);
shangpins[shangpins.length + 1] = shangPingDuiXiang;
console.log(shangpins);
}
function bianli() {
var div1 = document.getElementById("allDivId");
for(var i of shangpins) {
for(var j in i) {
div1.innerHTML += j + ":" + i[j]+"; ";
}
div1.innerHTML += "<br>";
}
}
</script>
</head>
<body>
<table id="tableId">
<tr>
<td>商品名称</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>数量</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>种类</td>
<td>
<select id="xiaLaKuangID">
<!--<option>水果类</option><option>书籍类</option><option>食品类</option>-->
</select>
</td>
</tr>
<tr>
<td><input type="button" value="添加" onclick="addDuiXiang()">
</td>
<td><input type="button" value="遍历商品" onclick="bianli()"></td>
</tr>
</table>
<div id="allDivId"><h2>up主诗书画唱提醒您，记得三连关注
！<br>给点“辛苦费”，谢谢！</h2></div>
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#allDivId{
width: 666px;height:233px;
border: 1px solid blue;
margin: 0 auto;
text-align: center;
}
table {
width: 666px;
height: 400px;
margin: 0px auto;
text-align: center;
border-top: solid 1px blue;
border-left: solid 1px blue;
background-color: green
}
td {
border-bottom: 1px solid blue;
border-right: 1px solid blue;
}
</style>
<script>
window.onload = function() {
var trShuZuVar = document.getElementsByTagName("tr");
for(var xiaBiao of trShuZuVar) {
xiaBiao.onmouseover = function() {
this.style.backgroundColor = "blue";
}
xiaBiao.onmouseout = function() {
this.style.backgroundColor = "green";
}
}
// shangPinChuanZhi:商品传值
window.shangPinChuanZhi = function(name, jiaGe, shuLiang, zhongLei) {
this.name = name;
this.jiaGe = jiaGe;
this.shuLiang = shuLiang;
this.zhongLei = zhongLei;
}
window.shangpins = [];
window.tables = document.getElementById("tableId");
createType();
}
function createType() {
var typeShuZu = ["水果类", "书籍类", "食品类"];
var selects = window.tables.getElementsByTagName("select");
for(var i of typeShuZu) {
var createTypeXiaLaKuang = document.createElement("option");
createTypeXiaLaKuang.setAttribute("value", i);
createTypeXiaLaKuang.innerHTML = i;
selects[0].appendChild(createTypeXiaLaKuang);
}
}
function addDuiXiang() {
var inputShuZu = document.getElementsByTagName("input");
var selectIndexVar = document.getElementById("xiaLaKuangID").selectedIndex;
var selectValue = document.getElementById("xiaLaKuangID").options[selectIndexVar].text;
var shangPingDuiXiang = new shangPinChuanZhi(inputShuZu[0].value,
inputShuZu[1].value, inputShuZu[2].value, selectValue);
shangpins[shangpins.length + 1] = shangPingDuiXiang;
console.log(shangpins);
}
//bianLi:遍历
function bianLi() {
var allDivShuZu=document.getElementById("allDivId");
for(var j of shangpins) {
for(var i in j) {
allDivShuZu.innerHTML += i + ":" + j[i]+"; ";
}
// 不可以把document.write("<br>");加到这里，不然还会跳转界面等
//i和j等的位置不要写反
allDivShuZu.innerHTML += "<br>";
}
}
</script>
</head>
<body>
<table id="tableId">
<tr>
<td>商品名称</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>数量</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>种类</td>
<td>
<select id="xiaLaKuangID">
<!--<option>水果类</option><option>书籍类</option><option>食品类</option>-->
</select>
</td>
</tr>
<tr>
<td><input type="button" value="添加" onclick="addDuiXiang()">
</td>
<td><input type="button" value="遍历商品" onclick="bianLi()"></td>
</tr>
</table>
<div id="allDivId"></div>
</body>
</html>
扩展（遍历时跳转到另一个页面打印遍历对象数组内容版）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*#allDivId{
width: 666px;height:233px;
border: 1px solid blue;
margin: 0 auto;
text-align: center;
}
*/
table {
width: 666px;
height: 400px;
margin: 0px auto;
text-align: center;
border-top: solid 1px blue;
border-left: solid 1px blue;
background-color: green
}
td {
border-bottom: 1px solid blue;
border-right: 1px solid blue;
}
</style>
<script>
window.onload = function() {
var trShuZuVar = document.getElementsByTagName("tr");
for(var xiaBiao of trShuZuVar) {
xiaBiao.onmouseover = function() {
this.style.backgroundColor = "blue";
}
xiaBiao.onmouseout = function() {
this.style.backgroundColor = "green";
}
}
// shangPinChuanZhi:商品传值
window.shangPinChuanZhi = function(name, jiaGe, shuLiang, zhongLei) {
this.name = name;
this.jiaGe = jiaGe;
this.shuLiang = shuLiang;
this.zhongLei = zhongLei;
}
window.shangpins = [];
window.tables = document.getElementById("tableId");
createType();
}
function createType() {
var typeShuZu = ["水果类", "书籍类", "食品类"];
var selects = window.tables.getElementsByTagName("select");
for(var i of typeShuZu) {
var createTypeXiaLaKuang = document.createElement("option");
createTypeXiaLaKuang.setAttribute("value", i);
createTypeXiaLaKuang.innerHTML = i;
selects[0].appendChild(createTypeXiaLaKuang);
}
}
function addDuiXiang() {
var inputShuZu = document.getElementsByTagName("input");
var selectIndexVar =
document.getElementById("xiaLaKuangID").selectedIndex;
var selectValue =
document.getElementById("xiaLaKuangID").options[selectIndexVar].text;
var shangPingDuiXiang = new shangPinChuanZhi(inputShuZu[0].value,
inputShuZu[1].value, inputShuZu[2].value, selectValue);
shangpins[shangpins.length + 1] = shangPingDuiXiang;
console.log(shangpins);
}
//bianLi:遍历
function bianLi() {
// var allDivShuZu=document.getElementById("allDivId");
for(var j of shangpins) {
for(var i in j) {
document.write(i + ":" + j[i]+"; ");
}
document.write("<br>");
}
}
</script>
</head>
<body>
<table id="tableId">
<tr>
<td>商品名称</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>数量</td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td>种类</td>
<td>
<select id="xiaLaKuangID">
</select>
</td>
</tr>
<tr>
<td><input type="button" value="添加" onclick="addDuiXiang()">
</td>
<td><input type="button" value="遍历商品" onclick="bianLi()"></td>
</tr>
</table>
<!--<div id="allDivId"></div>-->
</body>
</html>
