2014-01-09 52 views
11

我正在學習JavaScript,最近我一直在試驗鼠標事件,試圖瞭解它們是如何工作的。JavaScript的onClick事件 - HTML表格

<html> 
<head> 
    <title>Mouse Events Example</title> 
    <script type="text/javascript"> 
     function handleEvent(oEvent) { 
      var oTextbox = document.getElementById("txt1"); 
      oTextbox.value += "\n" + oEvent.type; 

      if(oEvent.type=="click") 
      { 
      var iScreenX = oEvent.screenX; 
      var iScreenY = oEvent.screenY; 
      var b = "Clicked at "+iScreenX+" , "+iScreenY; 

      alert(b); 
      } 
     } 
     function handleEvent1(oEvent) { 
      // alert("Left Window"); 
     } 
    </script> 
</head> 
<body> 
    <p>Use your mouse to click and double click the red square</p> 
    <div style="width: 100px; height: 100px; background-color: red" 
     onmouseover="handleEvent(event)" 
     onmouseout="handleEvent1(event)" 
     onmousedown="handleEvent(event)" 
     onmouseup="handleEvent(event)" 
     onclick="handleEvent(event)" 
     ondblclick="handleEvent(event)" id="div1"></div> 
    <p><textarea id="txt1" rows="15" cols="50"></textarea></p> 
</body> 

這是我一直在試圖理解代碼。任何人都可以幫助我創建一個HTML表格,點擊表格中的一個單元格後,他會告訴他單元格的單元格嗎? 一直困住它,謝謝你的幫助。

+0

有沒有在你的HTML沒有桌子 – Cilan

回答

19
var table = document.getElementById("tableID"); 
if (table != null) { 
    for (var i = 0; i < table.rows.length; i++) { 
     for (var j = 0; j < table.rows[i].cells.length; j++) 
     table.rows[i].cells[j].onclick = function() { 
      tableText(this); 
     }; 
    } 
} 

function tableText(tableCell) { 
    alert(tableCell.innerHTML); 
} 

是你可以做的一個例子。 DEMO

+1

我upvoted你,但我覺得你答案可以改善。 http://jsfiddle.net/8A37s/7/。 – robbmj

+0

@robbmj這是一個好主意,但我不認爲OP的表格單元格被命名爲 – Cilan

+0

無論哪種方式,您都有一個很好的答案。 – robbmj

2

只需插入onclick到表中的每個<td>,如果電池的名稱分別爲例子,你可以做一些與此類似:

<td onclick="alert('You are clicking on the cell EXAMPLE')">