JavaScript onClick event - HTML table
97,488
Solution 1
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);
}
is an example of what you could do. DEMO
Solution 2
Just insert onclick
into each <td>
of the table and if the cell's name were example, you could do something similar to this:
<td onclick="alert('You are clicking on the cell EXAMPLE')">
Author by
Raikonne
Updated on September 03, 2020Comments
-
Raikonne over 3 years
I'm learning JavaScript and recently I have been experimenting with Mouse events, trying to understand how they work.
<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>
this is the code I have been trying to understand. Can anyone help me to Create a HTML table that upon clicking in a cell of the table user is told cell he is clicking in? been stuck on it for time, thanks for help.