如何知道我在html表中的位置（日历）？

Question

I have a calendar made with a html table with buttons in each cell, and when a button is clicked, I need to know the day and the name where that button is located (the coordinates in the table) to send that location to a function

NOTE : Each cell of the table is a button.

Answer 1

Working fiddle .

You've just to give your buttons a common class, then attach the click event to this class and get the cell and the row using cellIndex/rowIndex like :

var classname = document.getElementsByClassName("my-btn");

var myFunction = function() {
    var cellIndex = this.parentNode.cellIndex;
    var rowIndex = this.parentNode.parentNode.rowIndex;

    alert("cellIndex : "+ cellIndex + " / rowIndex : "+rowIndex);
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

Hope this helps.

 var classname = document.getElementsByClassName("my-btn"); var myFunction = function() { var cellIndex = this.parentNode.cellIndex; var rowIndex = this.parentNode.parentNode.rowIndex; console.log("cellIndex : " + cellIndex + " / rowIndex : " + rowIndex); }; for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', myFunction, false); } 

 <table border=1> <tr> <th></th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> </tr> <tr> <td>1</td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> </tr> <tr> <td>2</td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> </tr> <tr> <td>3</td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> <td><button class="my-btn">Test button</button></td> </tr> </table> 

Answer 2

I assume that you've created the table dynamically. In the following I also handle the click of a cell, not a button, as I'd propose you that. Of couse you can use the same methods for buttons.

I just had several solutions, decide which one suits your needs the best.

Use the cell index (Quick'n'kinda Dirty)

When creating the cells, give each one an index with a similar syntax like the following: [row-name]|[col-name]. That way you can extract the names when catching the click event.

1.a Create the cells with any language eg PHP

echo "<td id=".rowname."|".colname."></td>";

1.b JS: Catch click Event

You could add an EventListener to every single cell. You shouldn't, as this article explains: https://www.kirupa.com/html5/handling_events_for_many_elements.htm

Rather use this concept:

// Catch click inside the table (so either the table itself or one of the children -> cells)
document.getElementById("table").addEventListener("click", function(e) {

    // be sure that user clicked a cell, not the table
        if (e.target !== e.currentTarget) {
            var id = e.target.id;
            // split id into rowname and colname
                var names = id.split("|");
            if (names[0] != '' && names[1] != '') {
                alert("Day: " + names[1] + ", Name: " + names[0]);
            }
        }

    // stop catching the event
        e.stopPropagation();

}, false);

Pro: fast, easy to implement

Con: Only for dynamic table creation, data in id / split charachter mustn't be used

Use row- and col-index

Got inspired by this thread on StackOverflow: Finding the location of a TD in a table

JS: Catch click event

document.getElementById("table").addEventListener("click", function(e) {

    // be sure that user clicked a cell, not the table
        if (e.target !== e.currentTarget) {
            var cell = e.target;
            // get index of cell in a row -> column
              var col = cell.cellIndex;
            // get index of the cell's parent -> row
              var row = cell.parentNode.rowIndex;
            // search for the right row
                var rows = table.childNodes(); // childNodes -> tr-nodes
                var i=0;
                var rowname = '';
                while (i < rows.length && rowname == '') {
                    if (i==row) {
                        rowname = rows[i].textContent;
                    }
                    i++;
                }
            // search for the right column
                var cols = rows[i].childNodes(); // childNodes -> td-nodes
                i=0;
                var colname = '';
                while (i < cols.length && colname == '') {
                    if (i==col) {
                        colname = cols[i].textContent;
                    }
                    i++;
                }
        }

    // stop catching the event
        e.stopPropagation();

}, false);

Pro: clean solution / no restrictions in naming the cells / no "abuse" of IDs, no dynamic creation needed

Con: quite long code, runtime can be expected to be longer

These are the two best concepts I came up with, may they help you. And better get rid of the buttons, if you don't really need them. Just makes it all more complicated