极客观点
项目管理
HarmonyOS
初学前端，遇到了一个问题，请指教:delBtnHandle(obj)这里会报错，并没有绑定上点击事件
图片描述
task.js：
/**
* aqiData，存储用户输入的空气指数数据
* 示例格式：
* aqiData = {
* "北京": 90,
* "上海": 40
* };
*/
var aqiData = {};
/**
* 从用户输入中获取数据，向aqiData中增加一条数据
* 然后渲染aqi-list列表，增加新增的数据
*/
function addAqiData() {
var city = document.getElementById("aqi-city-input").value;
var point = document.getElementById("aqi-value-input").value;
eval("aqiData." + city + " = " + point);
}
/**
* 渲染aqi-table表格
*/
function renderAqiList() {
var textval = "<tr><th>城市</th><th>空气质量</th><th>操作</th></tr>";
var targetTable = document.getElementById("aqi-table");
for(var key in aqiData){
textval += "<tr><td>" + key + "</td><td>" + aqiData[key] + "</td><td><input type='button' value='删除' class='delBtn' /></td></tr>";
}/*onclick='delBtnHandle(this)'*/
targetTable.innerHTML = textval;
}
/**
* 点击各个删除按钮的时候的处理逻辑
* 获取哪个城市数据被删，删除数据，更新表格显示
*/
delBtnHandle(obj){
// do sth.
var rowNum = obj.parentNode.parentNode.rowIndex;
var targetkey = obj.parentNode.parentNode.firstChild.innerHTML;
delete aqiData[targetkey];
document.getElementById("aqi-table").deleteRow(rowNum);
}
/**
* 点击add-btn时的处理逻辑
* 获取用户输入，更新数据，并进行页面呈现的更新
*/
function addBtnHandle() {
addAqiData();
renderAqiList();
document.getElementById("aqi-city-input").value = "";
document.getElementById("aqi-value-input").value = "";
document.getElementsByClassName("delBtn").onclick = function(){
delBtnHandle(this);
}
}
function init() {
// 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数
document.getElementById("add-btn").onclick = function(){
addBtnHandle();
}
// 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
}
window.onload = function(){
init();
}
task.html：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>IFE JavaScript Task 01</title>
<script src="scripts/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>
[1]: /im
g/bVDmlE