使用单元格索引（快速＆＃39; n＆＃39;有点脏）

Question

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

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

Answer 1

你只需要给你的按钮一个公共类，然后将click事件附加到这个类，并使用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>

Answer 2

我假设您已动态创建了表格。在下面我也处理单元格的点击，而不是按钮，因为我建议你这样做。你可以使用相同的按钮方法。

我只有几个解决方案，决定哪一个最适合您的需求。

使用单元格索引（快速＆＃39; n＆＃39;有点脏）

创建单元格时，为每个单元格提供一个索引，其语法类似如下：[row-name] | [col-name]。这样，您可以在捕获click事件时提取名称。

1.a使用任何语言创建单元格，例如PHP

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

1.b JS：抓住点击事件

您可以为每个单元格添加一个EventListener。你不应该这样做，正如本文所解释的那样：https://www.kirupa.com/html5/handling_events_for_many_elements.htm

而是使用这个概念：

// 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：快速，易于实施

Con：仅对于动态表创建，不能使用id / split charachter中的数据

使用row-col-index

受到StackOverflow上这个帖子的启发：Finding the location of a TD in a table

JS：抓住点击事件

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：清洁解决方案/命名单元格没有限制/没有＆＃34;滥用＆＃34; ID，不需要动态创建

Con：相当长的代码，运行时间可能会更长

这是我提出的两个最佳概念，可能对您有所帮助。如果你真的不需要它们，最好摆脱按钮。只是让它变得更加复杂

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

2 个答案:

使用单元格索引（快速＆＃39; n＆＃39;有点脏）

使用row-col-index