JS兩種方法和警示:遍歷數(shù)組內(nèi)容打印到div框，表格，商品下拉框，對象數(shù)組，跳轉(zhuǎn)，賦值
題目：創(chuàng)建一個表格，有商品名稱，價格，數(shù)量 三個文本框，種類下拉列表，下拉列表使用js進行賦值，添加一個按鈕，點擊按鈕后將所有內(nèi)容添加到一個對象數(shù)組中，添加另一個按鈕遍歷商品信息，點擊按鈕后將數(shù)組中所有的內(nèi)容遍歷到一個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>數(shù)量</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主詩書畫唱提醒您，記得三連關(guān)注
！<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>");加到這里，不然還會跳轉(zhuǎn)界面等
//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>數(shù)量</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>
擴展（遍歷時跳轉(zhuǎn)到另一個頁面打印遍歷對象數(shù)組內(nèi)容版）：
<!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>數(shù)量</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>
