17

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.

1
  • There's no table in your HTML
    – Cilan
    Jan 9, 2014 at 23:31

3 Answers 3

37
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

4
  • 2
    I upvoted you but I think your answer can be improved. jsfiddle.net/8A37s/7.
    – robbmj
    Jan 9, 2014 at 23:42
  • @robbmj That's a good idea, but I don't think the OP has table cells that are named like that
    – Cilan
    Jan 9, 2014 at 23:43
  • @user2169914 happy to help, please remember to upvote and accept Man of Snow's answer.
    – robbmj
    Jan 9, 2014 at 23:50
  • For getting column and row indexes in the onClick function, you must declare i & j variables with let instead of var;
    – Bruno L.
    Sep 29, 2021 at 15:18
5

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')">
1
  • 1
    perfectly reduced to the max! Apr 6, 2022 at 10:03
1

Instead of using getElementById, we could use .querySelectorAll to retrieve all the table dimensions AKA cells. After which, we can execute a single loop (Although please note that in the back end of JS, there will still be a loop executed to retrieve table cells.). First, let's create the action to be carried out upon clicking a cell:

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

Let's retrieve all the cells with querySelectorAll method:

var cells = document.querySelectorAll("td")

Place the event listener to each and every cell:

for (var i = 0; i < cells.length; i++)
    cells[i].addEventListener("click", tableText)
}

Complete code:

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

var cells = document.querySelectorAll("td")

for (var i = 0; i < cells.length; i++){
  cells[i].addEventListener("click", tableText)
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.