2020-4-2

放羊的星星，，

于 2020-04-03 23:14:08 发布

阅读量91

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_44849258/article/details/105303164

版权

题目一
利用事件冒泡原理实现了获取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>