Javascript多維數組不存儲數據
[英]Javascript Multidimensional Array not Storing Data
問題描述
我正在嘗試設置一個多維數組/數組來創建一個臨時使用的迷你數據庫。 無論出於何種原因，數據都不會存儲在數組中。 我不確定我做錯了什么。
HTML
<form>
<fieldset name="EmployeeInfo">
<legend>Employee Information</legend>
<table style="width: 100%">
<tr>
<td style="width: 13%; height: 23px;" align="right">First Name:</td>
<td style="width: 20%; height: 23px;">
<input name="empFirst" style="width: 100%" type="text" maxlength="20" required /></td>
<td style="width: 16%; height: 23px;" align="right">M.I.</td>
<td style="width: 15%; height: 23px;" align="left">
<input name="empMI" type="text" maxlength="1" style="width: 20%" required /></td>
<td style="width: 16%; height: 23px;" align="right">Last
Name:</td>
<td style="width: 20%; height: 23px;">
<input name="empLast" style="width: 100%" type="text" maxlength="35" required /></td>
</tr>
<tr>
<td align="right">Business Name:</td>
<td>
<input name="BusinessName" style="width: 100%" type="text" maxlength="35" required /></td>
<td align="right">Address:</td>
<td colspan="2" align="left">
<input name="empAddress" style="width: 90%" type="text" maxlength="35" required /></td>
<td> </td>
</tr>
<tr>
<td class="auto-style1" style="height: 26px" align="right">City:</td>
<td style="height: 26px">
<input name="empCity" style="width: 100%" type="text" maxlength="25" /></td>
<td class="auto-style1" style="height: 26px" required align="right">State:</td>
<td style="height: 26px">
<select name="empState">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI" selected="selected">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
<td class="auto-style1" style="height: 26px" align="right">ZIP:</td>
<td style="height: 26px" align="left">
<input name="empZIP" style="width: 50%" type="text" maxlength="5" required /></td>
</tr>
</table>
Javascript
var empArray = [];
var storeArray = function (){
var employee = [];
employee["firstName"] = $("empFirst").value;
employee["MI"] = $("empMI").value;
employee["lastName"] = $("empLast").value;
employee["address"] = $("empAddress").value;
employee["city"] = $("empCity").value;
employee["state"] = $("empState").value;
employee["lastName"] = $("empZip").value;
empArray.push(employee);
updateList();
}
var updateList = function(employee){
for (var i in employee){
var fullName = employee[i]["firstName"] + " " + employee[i]["MI"] + " " + employee[i]["lastName"];
var employeeList = document.getElementById("drpEmp");
var option = document.createElement("option");
option.text = fullName;
employeeList.add(option, employeeList[i]);
}
}
window.onload = function(){
$("btnNewEmp").onclick = storeArray;
}
[編輯] 忘記了 JSFiddle： https ://jsfiddle.net/m06x7dn3/2/
1 個解決方案
解決方案1
0 已采納 2015-06-10 20:53:22
一些問題：
- 您的 jQuery 選擇器不匹配任何內容 - 您需要執行
$("[name=empFirst]")或者更好的是，將所有名稱屬性更改為 ids 並使用$("#empFirst")。 - 您用郵政編碼覆蓋姓氏：
employee["lastName"] = $("empZip").value; -
employee是一個數組，但您將其視為結構。 - 在
updateList()您正在迭代employees- 這不存在 - 您需要迭代empArray代替。
還有更多......所以我只是重寫了它：
HTML：
<form>
<fieldset name="EmployeeInfo">
<legend>Employee Information</legend>
<table style="width: 100%">
<tr>
<td style="width: 13%; height: 23px;" align="right">First Name:</td>
<td style="width: 20%; height: 23px;">
<input id="empFirst" style="width: 100%" type="text" maxlength="20" required /></td>
<td style="width: 16%; height: 23px;" align="right">M.I.</td>
<td style="width: 15%; height: 23px;" align="left">
<input id="empMI" type="text" maxlength="1" style="width: 20%" required /></td>
<td style="width: 16%; height: 23px;" align="right">Last
Name:</td>
<td style="width: 20%; height: 23px;">
<input id="empLast" style="width: 100%" type="text" maxlength="35" required /></td>
</tr>
<tr>
<td align="right">Business Name:</td>
<td>
<input id="BusinessName" style="width: 100%" type="text" maxlength="35" required /></td>
<td align="right">Address:</td>
<td colspan="2" align="left">
<input id="empAddress" style="width: 90%" type="text" maxlength="35" required /></td>
<td> </td>
</tr>
<tr>
<td class="auto-style1" style="height: 26px" align="right">City:</td>
<td style="height: 26px">
<input id="empCity" style="width: 100%" type="text" maxlength="25" /></td>
<td class="auto-style1" style="height: 26px" required align="right">State:</td>
<td style="height: 26px">
<select id="empState">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI" selected="selected">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
<td class="auto-style1" style="height: 26px" align="right">ZIP:</td>
<td style="height: 26px" align="left">
<input id="empZip" style="width: 50%" type="text" maxlength="5" required /></td>
</tr>
</table>
</fieldset>
<div style="border-style: solid; border-width: 1px; width: 434px; height: 164px">
<select multiple="multiple" id="drpEmp" style="float: left; width: 256px; height: 121px;">
</select><br />
<input id="btnNewEmp" type="button" value="New Employee" style="width: 149px" /> <br /><br/>
<input id="btnEdtEmp" type="button" value="Edit Employee" style="width: 149px" />
<br />
<br />
<input id="btnDelEmp" type="button" value="Delete Employee" />
</div>
<br />
</div>
</form>
JavaScript：
$( document ).ready( function(){
var firstName = $("#empFirst"),
MI = $("#empMI"),
lastName = $("#empLast"),
business = $("#BusinessName"),
address = $("#empAddress"),
city = $("#empCity"),
state = $("#empState"),
zip = $("#empZip"),
employees = $("#drpEmp"),
newBtn = $("#btnNewEmp"),
edtBtn = $("#btnEdtEmp"),
delBtn = $("#btnDelEmp"),
selected = null;
function Employee(){
var that = this;
this.option =
$( "<option />" )
.data( "employee", this )
.prop( 'selected', true )
.on( 'click', function(){ that.edit() } );
employees.append( this.option );
this.update();
edtBtn.prop( 'disabled', false );
delBtn.prop( 'disabled', false );
}
Employee.prototype.update = function(){
this.firstName = firstName.val();
this.MI = MI.val();
this.lastName = lastName.val();
this.business = business.val();
this.address = address.val();
this.city = city.val();
this.state = state.val();
this.zip = zip.val();
this.option.text( this.getFullName() );
}
Employee.prototype.getFullName = function(){
return [ this.firstName, this.MI, this.lastName ].join( ' ' );
}
Employee.prototype.edit = function(){
firstName.val( this.firstName );
MI.val( this.MI );
lastName.val( this.lastName );
business.val( this.business );
address.val( this.address );
city.val( this.city );
state.val( this.state );
zip.val( this.zip );
selected = this;
edtBtn.prop( 'disabled', false );
delBtn.prop( 'disabled', false );
}
newBtn
.on( 'click', function(){
selected = new Employee();
});
edtBtn
.on( 'click', function(){
if ( selected != null )
selected.update();
})
.prop( 'disabled', true );
delBtn
.on( 'click', function(){
$( "option:selected", employees ).remove();
selected = null;
edtBtn.prop( 'disabled', true );
delBtn.prop( 'disabled', true );
})
.prop( 'disabled', true );
});
將值存儲在多維數組中（JavaScript）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.