js獲取點選單元格中的內容程式碼例項

螞蟻小編發表於2017-03-25
JS

table表格是用來組織資料的，單元格td儲存著指定的資訊，在實際應用中，可能有這樣的需求，那就是點選單元格的時候，能夠獲取當前單元格的一定資訊，當然也不一定非要是點選單元格，這不是我們關注的重點，下面就以點選單元格獲取單元格中的內容為例做一下簡單介紹,程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function GetRowNo(ev,obj) { 
  var ev=ev||window.event; 
  var target=ev.target||ev.srcElement; 
  if(target.tagName.toLowerCase()=="td"){ 
    obj.innerHTML=target.innerHTML;
  } 
}
window.onload=function(){
  var oshow=document.getElementById("show");
  var otb=document.getElementById("tb");
  otb.onclick=function(ev){
    GetRowNo(ev,oshow);
  }  
}
</script>
</head>
<body>
<div id="show"></div>
<table id="tb" border="1">
  <tr>
    <th>姓名</th>
    <th>性別</th>
    <th>密碼</th>
    <th>地址</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>男</td>
    <td>zhangsan</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>男</td>
    <td>lisi</td>
    <td>安慶</td>
  </tr>
</table>
</body>
</html>

上面的程式碼實現了我們的要求，點選td單元格可以將其中的內容寫入div，下面介紹一下它的實現過程。

一.相關閱讀:

1.function GetRowNo(ev,obj){}，此函式能夠將表格單元格中的內容寫入div，第一個引數是事件物件，第二個引數是一個元素物件，單元格中的內容要寫入此元素中。

2.var ev=ev||window.event，實現事件物件的相容性。

3.var target=ev.target||ev.srcElement，獲取事件源物件，這裡也是採用了相容性處理。

4.if(target.tagName.toLowerCase()=="td"){obj.innerHTML=target.innerHTML;}，判斷當前點選的元素是否是td標籤，如果是則將td單元格中的內容寫入obj中去。

二.相關閱讀:

1.var ev=ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。 

2.ev.target可以參閱javascript event.target一章節。 

3.ev.srcElement可以參閱javascript event.srcElement一章節。 

4.tagName屬性可以參閱javascipt tagName一章節。 

5.toLowerCase()函式可以參閱javascript toLowerCase()一章節。 

相關文章