Javascript: 如何让单元格 bgcolor 高于当前单元格元素？

Question

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

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

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

编辑：

  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 我在其他一些帖子中发现的代码，其中的问题有点相似，但我只是没有得到父子方法。我正在开发一个进度条，如果它上面的单元格（时间段的行）是棕色的（休息时间），进度条应该变成红色，因此将默认单元格的 class 从 progress-bar-success 更改为progress-bar-danger 如果上面的单元格是棕色的。

Answer 1

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

     $(document).ready(function () {            
        $("#current").closest("tr").prev().find("td").each(function (a, b) {

            if(String(b["bgColor"]).trim()=="Brown")
            {
                //here is cell which has brown bgcolor
                alert("brown");
            }
        });
    });

Answer 2

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

像这样：

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

Answer 3

尽管没有使用 jQuery，但我的处理方式几乎与 Sandip 相同。首先，我要求浏览器在页面加载完成后调用我的函数。接下来，我扩展了 HTMLCollection 数据类型，以便我们可以在 HTMLCollection.

上使用数组数据类型的 forEach 函数

完成后，页面会调用我们的代码并立即定位我们要查找的单元格 (t1)。完成此操作后，我们只需遍历 table 的 rows 集合即可找到与我们的 t1 的父节点匹配的那个——这将是包含它的行。接下来我们遍历单元格集合并再次搜索 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 高于当前单元格元素？

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

html

javascript

element

colors

cell