CODEWITHSUNDEEP
javascriptcsshtml-table
j_pingle
j_pingle

Reputation: 21

How to change the element at a row and column of a table in JavaScript

I re-read earlier posts on the subject and I thought that I implemented it correctly until it did not work. Is there a better way to change the element at a row and column of a table in JavaScript?

From HTML:

  <table  class="center" border="3" id="checkersBoard">...
  <tr>
                 <td class="block"><img class="BlankSpace" src="Directory/BlankSpace.png"></td>  <td class="block"><img class="RedPiece" src="Directory/RedPiece.png"></td>  <td class="block"><img class="BlankSpace" src="Directory/BlankSpace.png"></td>  <td class="block"><img class="RedPiece" src="Directory/RedPiece.png"></td>  <td class="block"><img class="BlankSpace" src="Directory/BlankSpace.png"></td>  <td class="block"><img class="RedPiece" src="Directory/RedPiece.png"></td>  <td class="block"><img class="BlankSpace" src="Directory/BlankSpace.png"></td>  <td class="block"><img class="RedPiece" src="Directory/RedPiece.png"></td>
            </tr> // I know terrible but I was just copying and pasting from someone... will change later

From JavaScript:

var board = document.getElementById("checkersBoard");
var isRedHighlighted = false;
var isBlackHighlighted = false;
var lastClick;

board.addEventListener("click", function(e)
{
if(isBlackHighlighted || isRedHighlighted)
{
    if(isBlackHighlighted)
    {

        if(e.target.getAttribute('src') == "Directory/BlankSpace.png")
        {
           var targetLoc = {row :(e.target.parentNode.parentNode.rowIndex+1), col :(e.target.parentNode.cellIndex+1) };
           var lastClickLoc = {row :(lastClick.parentNode.parentNode.rowIndex +1), col :(lastClick.parentNode.cellIndex +1) };
            lastClick.src = "Directory/BlankSpace.png";
            e.target.src= "Directory/BlackPiece.png";

            if(lastClickLoc.row - 2 == targetLoc.row && lastClickLoc.col -2 == targetLoc.col)
            {
                alert('something should have happened');
                board.rows[(lastClickLoc.row)].cells[(lastClickLoc.col)].setAttribute('src',"Directory/BlankSpace.png" ); // why does this not work
                board.parentNode.rows[5].cells[5].src = "Directory/BlackPiece.png" // why does this not work
            }

            isBlackHighlighted = false;

        }

Upvotes: 1

Views: 1982

Answers (1)

Greg
Greg

Reputation: 1243

To access an element at a given row and col you can use:

board.getElementsByTagName('tr')[row].getElementsByTagName('td')[col]

So you should change

board.rows[(lastClickLoc.row)].cells[(lastClickLoc.col)].setAttribute('src',"Directory/BlankSpace.png" );
board.parentNode.rows[5].cells[5].src = "Directory/BlackPiece.png"

to

board.getElementsByTagName('tr')[(lastClickLoc.row)].getElementsByTagName('td')[(lastClickLoc.col)].getElementsByTagName('img')[0].setAttribute('src',"Directory/BlankSpace.png" );
board.parentNode.getElementsByTagName('tr')[5].getElementsByTagName('td')[5].getElementsByTagName('img')[0].src = "Directory/BlackPiece.png"

Upvotes: 1

Related Questions