Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript onClick event - HTML table

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.

like image 455
Raikonne Avatar asked Jan 09 '14 23:01

Raikonne


2 Answers

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

like image 110
Cilan Avatar answered Oct 09 '22 15:10

Cilan


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')">
like image 30
Anonymous Avatar answered Oct 09 '22 15:10

Anonymous