2014-01-09 3 views
11

Я изучаю JavaScript, и недавно я экспериментировал с событиями мыши, пытаясь понять, как они работают.JavaScript onClick event - 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')"> 
Смежные вопросы