<!DOCTYPE>
<html>
??<head>
????<meta?charset="utf-8">
????<title>IFE?JavaScript?Task?01</title>
????<script?src="task.js"></script>
??</head>
<body>
??<div>
????<label>城市名稱:<input?id="aqi-city-input"?type="text"></label><br>
????<label>空氣質量指數:<input?id="aqi-value-input"?type="text"></label><br>
????<button?id="add-btn">確認添加</button>
??</div>
??<table?id="aqi-table">
??<!--?
????<tr>
??????<td>城市</td><td>空氣質量</td><td>操作</td>
????</tr>
????<tr>
??????<td>北京</td><td>90</td><td><button>刪除</button></td>
????</tr>
????<tr>
??????<td>北京</td><td>90</td><td><button>刪除</button></td>
????</tr>
???-->
??</table>
</body>
</html>task.js/**
?*?aqiData,存儲用戶輸入的空氣指數數據
?*?示例格式:
?*?aqiData?=?{
?*????"北京":?90,
?*????"上海":?40
?*?};
?*/
var?aqiData?=?{};
/**
?*?從用戶輸入中獲取數據,向aqiData中增加一條數據
?*?然后渲染aqi-list列表,增加新增的數據
?*/
function?addAqiData()?{
}
/**
?*?渲染aqi-table表格
?*/
function?renderAqiList()?{
}
/**
?*?點擊add-btn時的處理邏輯
?*?獲取用戶輸入,更新數據,并進行頁面呈現的更新
?*/
function?addBtnHandle()?{
??addAqiData();
??renderAqiList();
}
/**
?*?點擊各個刪除按鈕的時候的處理邏輯
?*?獲取哪個城市數據被刪,刪除數據,更新表格顯示
?*/
function?delBtnHandle()?{
??//?do?sth.
??renderAqiList();
}
function?init()?{
??//?在這下面給add-btn綁定一個點擊事件,點擊時觸發addBtnHandle函數
??//?想辦法給aqi-table中的所有刪除按鈕綁定事件,觸發delBtnHandle函數
}
init();用戶輸入的城市名必須為中英文字符,空氣質量指數必須為整數用戶輸入的城市名字和空氣質量指數需要進行前后去空格及空字符處理(trim)用戶輸入不合規格時,需要給出提示(允許用alert,也可以自行定義提示方式)用戶可以點擊表格列中的“刪除”按鈕,刪掉那一行的數據還是貼代碼,謝謝
做題啦做題啦
西蘭花偉大炮
2017-04-19 12:42:41