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

Question

I have a table generated by javascript. When creating the tbody of the table I stored each element for each cell in an array. Any element is easily located by

let element = elements[r][c];

Where r and c are the row and column of the tbody.

When an event happens on the cell, like keyup , I capture the event and use event.target to retrieve the element the event was fired from.

event_element = event.target;

Is there now a way to find which element in the array elements is event_element ?

Currently I am setting element.name = element_rXcX then parsing event.target.name to find values for r and c to recover the actual element in the array.

This also allows me to find the row and column of the cell in the table for an element's event.

I am assuming locating an element in the element array would be even better, and it may give me an aha moment understanding the DOM.

Keep in mind the element html may often be identical, however I noticed through the chrome javascript console that if I logged an element and clicked on it in the console it would highlight the correct cell in the table.

This makes me believe I must be able to look up the element in my element array.

Answer 1

You could nest Array.find like so:

 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] 

Bear in mind that array.find is not supported by IE, so you would need to have a polyfill for it.

Answer 2

You can try:

event_element.cellIndex and event_element.parentNode.rowIndex

The cellIndex property returns the position of a cell in the cells collection of a table row. http://www.w3schools.com/jsref/prop_tabledata_cellindex.asp

The rowIndex property returns the position of a row in the rows collection of a table. http://www.w3schools.com/jsref/prop_tablerow_rowindex.asp