生活随笔
收集整理的這篇文章主要介紹了
2020-4-2
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
題目一
利用事件冒泡原理實現了獲取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事件冒泡
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的2020-4-2的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
