JavaScript 獲取td單元格內容

antzone發表於2018-11-23
JavaScript

本章節介紹一下如何利用javascript獲取表格中單元格中的內容。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<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>

上述程式碼利用事件冒泡原理實現了獲取td單元格內容的功能。

相關閱讀：

（1）.事件冒泡可以參閱JavaScript 事件冒泡一章節。

（2）. ev.target參閱JavaScript event.target一章節。

（3）.innerHTML屬性參閱JavaScript innerHTML一章節。   

相關文章