javascript - 如何知道我在 html 表(日历)中的位置？

Question

我有一个用 html 表格制作的日历，每个单元格中都有按钮，当单击按钮时，我需要知道该按钮所在的日期和名称(表格中的坐标)以发送该位置到一个函数

注意:表格的每个单元格都是一个按钮。

Answer 1

<强> Working fiddle 。

您只需为按钮提供一个公共(public)类，然后将单击事件附加到此类，并使用 cellIndex/rowIndex 获取单元格和行，如下所示:

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);
}

希望这有帮助。

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>