Getting coordinates of table cells and comparing with different tables via Javascript

Question

It's really easy to access to coordinates of table cells with this and this example ways. But when I'm trying to get cells and compare with another table's cell which is avaible on page, a problem occurs. Because I don't know how to compare them in same time. After many hours I tried to do this, unfortunately, still there is no luck.

In following classic tables list below, shows 2 different tables with different id numbers:

    <table id="a1">
        <tbody>
            <tr>
                <td>RED</td>
                <td>GREEN</td>
                <td>BLUE</td>
            </tr>

            <tr>
                <td>YELLOW</td>
                <td>PINK</td>
                <td>samespothere</td>
            </tr>
        </tbody>
    </table>
<hr>
    <table id="a2">
       <tbody>
            <tr>
                <td>BLACK</td>
                <td>BROWN</td>
                <td>WHITE</td>
            </tr>

            <tr>
                <td>CYAN</td>
                <td>GRAY</td>
                <td>samespothereANDsomeextra</td>
            </tr>
        </tbody>
    </table>

And also, I'm using modified version of this JS example to get location of cells. This modified version I did is not able to make compare operation. I've just edited for make it easier.

var cells = document.getElementsByTagName("td");  //For all table cells on page.

var i;
for(i = 0; i < cells.length; i++)
{

    cells[i].onclick = vera;
}

function vera()
{
        var cellIndex  = this.cellIndex + 1;  

        var rowIndex = this.parentNode.rowIndex + 1;

        var centra = cellIndex +","+ rowIndex;  //This gives the coordinate of cell which you clicked on.  

        alert(centra);

} 

Here is my question: I need to make a compare operation when I click on samespothere(Example text I wrote) table cell. Compare operation should be able with the same location of other table. Lets think like this: If second table cell(same location, different table) includes some of clicked cell's text(from first table), alert must show up and say "This clicked text in table id=1 cell:2row:2, matched in table id=2 cell:2row:2".

And here is the online code: http://jsfiddle.net/LujydnaL/

Answer 1

window.onload = function () {
  document.getElementsByTagName('table')[0].addEventListener('click', function(element) {
    var rowIndex = element.target.parentElement.rowIndex;
    var cellIndex = element.target.cellIndex;
    
    var compare = document.getElementsByTagName('table')[1].rows[rowIndex].cells[cellIndex];
    
    var myNodelist = document.querySelectorAll("td");
    var i;
    for (i = 0; i < myNodelist.length; i++) {
      myNodelist[i].style.backgroundColor = "white";
    }
    
    compare.style.backgroundColor = "grey";    
    
    document.getElementById('alert1').innerHTML = ('CLICK => Row index = ' + rowIndex + ', Column index = ' + cellIndex);
    document.getElementById('alert2').innerHTML = ('COMPARE = ' + compare.innerHTML)
 }, false);
}

tr, th, td {
  padding: 0.2rem;
  border: 1px solid black
}

table:hover {
  cursor: pointer;
}

<table>
        <tbody>
            <tr>
                <td>a11</td>
                <td>a12</td>
                <td>a13</td>
            </tr>

            <tr>
                <td>a21</td>
                <td>a22</td>
                <td>a23</td>
            </tr>
        </tbody>
    </table>
<p id="alert1"></p>    
<hr>
    <table>
       <tbody>
            <tr>
                <td>b11</td>
                <td>b12</td>
                <td>b13</td>
            </tr>

            <tr>
                <td>b21</td>
                <td>b22</td>
                <td>b23</td>
            </tr>
        </tbody>
    </table>
<p id="alert2"></p>

Answer 2

I think this is what you want:

function vera()
{
    var cellIndex  = this.cellIndex + 1;  

    var rowIndex = this.parentNode.rowIndex + 1; 

    var centra = cellIndex +","+ rowIndex; //This gives the coordinate of cell which you clicked on.

    alert(centra);

    // new code here
    table2 = document.getElementById('a2');
    rowInTable2 = table2.getElementsByTagName('tr')[rowIndex-1];
    cellInTable2 = rowInTable2.getElementsByTagName('td')[cellIndex-1];
    console.log(cellInTable2);
    // do something with cellInTable2 now
}