#StackBounty: #javascript #jquery #arrays #html-table Interactions between adjacent td

Bounty: 50

Question

How can i compare two adjacent cells thanks to them coordinates?

Documentation which helped me

I already saw these questions, they helped me but they are different from my case:

  1. question on stackOverflow
  2. question on stackOverflow
  3. question on stackOverflow
  4. Mds documentation to build a dynamic table

Code

I’ve a dynamically generated table

function tableGenerate(Mytable){
        for(var i = 0; i < myTable.length; i++) {
            var innerArrayLength = myTable[i].length;
            for(var j = 0; j<innerArrayLength; j++){
                if(myTable[i][j] === 0){
                    myTable[i][j]="x";
                }else{
                    myTable[i][j]="y";
                };
            };
            $("#aTable").append("<tr><td>"+ myTable[i].join('</td><td>') + "</td></tr>")    
        }
}  

About the interested cells (two global variables) in actualPosition row and cell have random values

var mainTd = {
     name: 'interestedValue',
     actualPosition:{
            row: 5,
            cell: 4
          }
};

var otherMainTd = {
     actualPosition:{
            row: 2,
            cell: 3
          }
};

The final part of the code works in this way:

  • I save the position of selectedTd in two differents variables
  • I create the 2d array directions with the coordinates of near cells relatives to the selectedTd
  • enter in the first if, compare the two cells. If one of the coordinates are the same, you enter in this last if.
function compare(selectedTd) {
    let tdRow = selectedTd.actualPosition.row;
    let tdCell = selectedTd.actualPosition.cell;
    let directions = [
        [tdRow - 1, tdCell],
        [tdRow + 1, tdCell],
        [tdRow, tdCell + 1],
        [tdRow, tdCell - 1]
    ]; //these are the TD near the mainTd, the one i need to compare to the others

    let tdToCompare = [];

    if (selectedTd.name === 'interestedValue') {
        tdToCompare = [otherMainTd.actualPosition.row, otherMainTd.actualPosition.cell];
        for (let i = 0; i < directions.length; i++) {
            if (directions[i] == tdToCompare) {
                console.log('you are here');
            }
        }
    } else {
        tdToCompare = [mainTd.actualPosition.row, mainTd.actualPosition.cell];
        for (let i = 0; i < directions.length; i++) {
            if (directions[i] === tdToCompare) {
                console.log('you are here');
            }
        }
    }
};

Now the main problem is: I read the coordinates, I store them in the 2 arrays, I can read them but I cannot able to enter in the if statement.

This is what I want to achieve: compare the coordinates of the blackTd with the coordinates of the red-borders td.

enter image description here

Codepen

the interested functions in the codepen are with different names, but the structure is the same that you saw in this post. I changed the original names because I think it could be more clear with general names instead of the names that i choose.

the interested functions are:

  • function fight(playerInFight) —> function compare(selectedTd)
  • function mapGenerate(map) —> function tableGenerate(MyTable)
  • mainTd and otherMainTd —> character and characterTwo

CodepenHere


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.