Question

SampleImage

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

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

如何使用Javascript来获取单元格上方的单元格的bgcolor，使用单元格的id作为所选单元格的引用，然后比较bgcolor是否等于Brown？

编辑：

  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;
    }

  }

}

很抱歉，我的尝试一直在尝试一些jQuery代码，我在其他一些帖子上发现问题有点类似，但我只是没有得到父子方法。我正在进行一个进度条，如果它上面的单元格（时间段的行）是棕色（休息时间），则进度条应该变为红色，从而将默认单元格的类从进度条成功更改为进度条 - 如果它上面的细胞是棕色的危险。

Answer 1

找到最近的行，然后找到上一行，然后获取所有单元格并通过每个循环找到所需的属性

StepScope

Answer 2

你应该使用jquery来获取该对象的背景颜色。

像这样：

var color=$("#tdwithbgcolor").css("background-color");
$("#tdtosetcolor").css("background-color",color);

Answer 3

我和Sandip几乎一样，尽管没有使用jQuery。首先，我已经要求浏览器在页面加载完成后调用我的函数。接下来，我扩展了HTMLCollection数据类型，以便我们可以在HTMLCollection上使用数组数据类型的forEach函数。

完成后，页面调用我们的代码并立即找到我们寻找的单元格（t1）。完成此操作后，我们只需单步执行表的rows集合即可找到与t1的parentNode匹配的集合 - 这将是包含它的行。接下来，我们逐步完成单元格集合并再次搜索t1单元格 - 这意味着我们现在拥有初始目标t1的行和单元格索引。

从那里，我们简单地将1减去行索引并得到我们的最终目标t2。一旦我们有了这个单元格，我们可以从中获取任何信息，例如属性（bgcolor）的值或内容等等。

<!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>

Javascript：如何让细胞bgcolor高于当前细胞元素？

3 个答案: