题目一
利用事件冒泡原理实现了获取td单元格内容的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
#table{ width:300px; height:100px; border:1px solid #ccc; border-collapse:collapse;
}
#table td,.table th { border:1px solid #ccc; padding:5px;
}
</style>
<script>
window.onload=function(){let otable=document.getElementById("table");let oshow=document.getElementById("show");otable.onclick=function(ev){let target=ev.target;oshow.innerHTML=target.innerHTML;}
}
</script>
</head>
<body>
<div id="show"></div>
<table id="table"> <thead> <tr> <th>例一</th> <th>例二</th> </tr> </thead> <tr> <td>例三</td> <td>例四</td> </tr> <tr> <td>例五</td> <td>例六</td> </tr>
</table>
</body>
</html>
运行结果：
相关知识：
target属性可以返回触发事件的元素。
事件冒泡参阅Java script事件冒泡
