使用 javascript 从元素的事件中查找存在于元素数组中的 html 元素

Question

我有一个由 javascript 生成的表。在创建表格的 tbody 时，我将每个单元格的每个元素存储在一个数组中。任何元素都可以通过

轻松定位

let element = elements[r][c];

其中 r 和 c 是 tbody 的行和列。

当单元格上发生事件时，例如keyup，我捕获该事件并使用event.target 检索触发事件的元素。

event_element = event.target;

现在有没有办法找出数组elements 中的哪个元素是event_element？

目前我正在设置 element.name = element_rXcX 然后解析 event.target.name 以查找 r 和 c 的值以恢复数组中的实际元素。

这也允许我在表格中为元素的事件找到单元格的行和列。

我假设在元素数组中定位一个元素会更好，它可能会让我有一个理解 DOM 的机会。

请记住元素 html 可能通常是相同的，但是我通过 chrome javascript 控制台注意到，如果我记录一个元素并在控制台中单击它，它将突出显示表格中的正确单元格。

这让我相信我必须能够在我的元素数组中查找元素。

Answer 1

你可以像这样嵌套Array.find：

var arr = []
arr[0] = ["00", "01"];
arr[1] = ["10", "11"];
arr[2] = ["20", "21"];

function find(arr, element) {
  var col;
  var row;
  var tmpArr = arr.find(function(subArr){
    col = subArr.indexOf(element);
    return col > -1;
  });
  row = arr.indexOf(tmpArr);
  return [row, col];
}

console.log(find(arr, "21")); // [2,1]

请记住，IE 不支持 array.find，因此您需要为其添加一个 polyfill。

Answer 2

你可以试试：

event_element.cellIndex 和 event_element.parentNode.rowIndex

cellIndex 属性返回一个单元格在表格行的单元格集合中的位置。 http://www.w3schools.com/jsref/prop_tabledata_cellindex.asp

rowIndex 属性返回行在表的行集合中的位置。 http://www.w3schools.com/jsref/prop_tablerow_rowindex.asp