web-dev-qa-db-fra.com

Événement JavaScript onClick - tableau HTML

J'apprends JavaScript et récemment j'ai expérimenté avec des événements de souris, essayant de comprendre comment ils fonctionnent.

<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>

c'est le code que j'ai essayé de comprendre. Quelqu'un peut-il m'aider à créer un tableau HTML qui, en cliquant dans une cellule de l'utilisateur du tableau, est informé de la cellule dans laquelle il clique? été coincé dessus pour le temps, merci pour l'aide.

javascripthtmleventsonclick
16
Raikonne
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);
}

est un exemple de ce que vous pourriez faire. DÉMO

26
Cilan

Insérez simplement onclick dans chaque <td> du tableau et si le nom de la cellule était un exemple, vous pourriez faire quelque chose de similaire à ceci:

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