Javascript: How To Get Cell bgcolor Above Current Cell Element?

SampleImage

<tr>
    <td></td>
    <td bgcolor = "Brown"></td>
    <td></td>
</tr>

<tr>
    <td></td>
    <td id="current"></td>
    <td></td>
</tr>

How do I use Javascript to get the bgcolor of the cell above a cell using the cell's id as reference to the chosen cell then compare if the bgcolor is equal to Brown?

EDIT:

  function move2(barName, start, currentCell, totSec,barLength) {
  var no = start;
  var current = currentCell;
  var totalSec = totSec;
  var span = no - current;
  var bar = barName + no;
  var lengthCount = 0;
  var progLength = barLength - 1;
  var elem = document.getElementById(bar);
  var width = 0;
  var stop = 0;
function fill(){
        while(no < current){
            if(lengthCount >= progLength){
                stop = 1;
                break;
            }
            elem.style.width = '100%'; 



    if ($(this).parent().next().children("elem").index() == "Brown") {
    elem.className = 'progress-bar progress-bar-danger'; 
    }


        no++;
        bar = barName + no;
        elem = document.getElementById(bar);
        lengthCount++;
        stop = 0;
    }

  }

}

Sorry, my attempts have been trying some jQuery codes I've found on some other posts where the problems are kinda similar but I just don't get the parent and children methods. I'm working on a progress bar where if the cell above it(Row for time periods) is brown (Break Time) the progress bar should turn red, hence changing the default cell's class from progress-bar-success to progress-bar-danger if the cell above it is brown.

Solution

I went about this virtually the same way as Sandip, albeit sans the use of jQuery. First, I've asked the browser to call my function when the page has finished loading. Next, I extend the HTMLCollection data-type so that we can use the array data-type's forEach function on an HTMLCollection.

Once done, the page calls our code and immediately locates the cell we seek (t1). Having done this, we simply step through the rows collection of the table to find the one that matches the parentNode of our t1 - this will be the row that contains it. Next we step through the cells collection and search for the t1 cell again - this means we now have the both row and the cell indices of our initial target, t1.

From there, we simply subtract 1 to the rows index and get our final target, t2. Once we have this cell, we can get any info from it we like, like the value of an attribute (bgcolor) or the contents, etc, etc.

<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);
function byId(id){return document.getElementById(id);}
HTMLCollection.prototype.forEach = Array.prototype.forEach;

function onDocLoaded(evt)
{
    // 1. get id=current cell
    var curCell = byId('current');

    // 2.get current row
    var curRow = curCell.parentNode;
    var table = curRow.parentNode.parentNode;   // parentNode twice, since we're using both a table and a tbody element to wrap the rows.

    // 3. get index of current row in table's 'rows' collection
    var rowIndex = -1;
    table.rows.forEach( function(elem, index, array){if (elem == curRow)rowIndex = index;});

    // 4. get index of current cell in table's current row's 'cells' collection
    var cellIndex = -1;
    table.rows[rowIndex].cells.forEach( function(elem, index, array){if (elem == curCell)cellIndex = index;});

    // 5. get data from the original target cell - the one below the one with an id of 'current'
    alert( table.rows[rowIndex-1].cells[cellIndex].getAttribute('bgcolor') );
    alert( table.rows[rowIndex-1].cells[cellIndex].textContent );

}
</script>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td></td>
                <td bgcolor = "Brown">blah</td>
                <td></td>
            </tr>

            <tr>
                <td></td>
                <td id="current"></td>
                <td></td>
            </tr>       
        </tbody>
    </table>
</body>
</html>