使用 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属性返回一行在表的rows集合中的位置。http://www.w3schools.com/jsref/prop_tablerow_rowindex.asp