En 2016 escribí una función Javascript para una aplicación web (flyatlas2.org) que hace lo siguiente:

Si hace clic en una celda de la Tabla 1, se resalta la columna correspondiente en la Tabla 2.

Esto se ilustra en la captura de pantalla de la izquierda a continuación, que es un ejemplo que el usuario puede ver y verificar aquí .

Se tomó bajo Mac OS X Mojave con el navegador web Safari (v.14.1.2), aunque Chrome (103) se comporta de la misma manera, al igual que Edge en Windows 10 (Educación 21H2 de 64 bits ejecutándose en emulación).

Sin embargo, en Mac OS X Mojave con Firefox (v.101), todos estos navegadores en Mac OS X Monterey y Chrome (v.103) o Firefox en Windows 10, la columna resaltada en la tabla inferior es la que encabeza Ag (Accesorio glándulas), no Cs (Carcass), como se muestra a la derecha. (Me alertó sobre el problema alguien que ejecuta Windows en una PC en lugar de emular en una Mac).

Entonces, algo debe haber cambiado en la interpretación del navegador de Javascript. ¿Pero que?

Mi código está debajo (la tabla superior es geneTable, la inferior es transTable):

 function hiliteTrans(geneCellID, geneTableID) { clearBordersT(); // removes borders from any previous selection // IDs follow underscore var transTableID = "tabTrans" + geneTableID.substring(geneTableID.indexOf("_")); geneCellID = geneCellID.substring(geneCellID.indexOf("_") + 1); var transTable = document.getElementById(transTableID); for (var i=1; i<transTable.rows.length; i++) // modified for two name rows { for (var j=2; j < transTable.rows[i].cells.length; j++) { if(j-1==geneCellID) // modified for two name cells { if(i==1) { transTable.rows[i].cells[j].classList.add("highlightT"); } else { transTable.rows[i].cells[j].classList.add("outlineT"); } } } } }