Fatal编程技术网
  • javascript/
  • Javascript：如何在当前单元格元素上方获取单元格bgcolor？

Javascript：如何在当前单元格元素上方获取单元格bgcolor？

javascript html colors

Javascript：如何在当前单元格元素上方获取单元格bgcolor？,javascript,html,colors,cell,element,Javascript,Html,Colors,Cell,Element,如何使用Javascript获取单元格上方单元格的bgcolor，使用单元格的id作为所选单元格的引用，然后比较bgcolor是否等于Brown 编辑： 函数move2（barName、start、currentCell、totSec、barLength）{ var no=启动； 无功电流=电流单元； var totalSec=totSec； var span=无电流； var bar=barName+no； 变量长度计数=0； var progLength=barLength-1； var e
如何使用Javascript获取单元格上方单元格的bgcolor，使用单元格的id作为所选单元格的引用，然后比较bgcolor是否等于Brown

编辑：

函数move2（barName、start、currentCell、totSec、barLength）{
var no=启动；
无功电流=电流单元；
var totalSec=totSec；
var span=无电流；
var bar=barName+no；
变量长度计数=0；
var progLength=barLength-1；
var elem=document.getElementById（bar）；
var宽度=0；
var-stop=0；
函数fill（）{
而（无<电流）{
如果（长度计数>=progLength）{
停止=1；
打破
}
elem.style.width='100%'；
if（$（this.parent（）.next（）.children（“elem”）.index（）=“Brown”）{
elem.className='进度条进度条危险'；
}
否++；
bar=barName+no；
elem=document.getElementById（bar）；
长度计数++；
停止=0；
}
}
}

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

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

     $(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");
            }
        });
    });
您应该使用jquery获取该对象的背景色

像这样：

var color=$("#tdwithbgcolor").css("background-color");
$("#tdtosetcolor").css("background-color",color);
我的做法与Sandip几乎相同，尽管没有使用jQuery。首先，我要求浏览器在页面加载完成后调用我的函数。接下来，我扩展了HTMLCollection数据类型，以便可以在HTMLCollection上使用数组数据类型的
forEach
函数

一旦完成，页面调用我们的代码并立即定位我们寻找的单元格（t1）。完成此操作后，我们只需单步遍历表的
行
集合，找到与t1的parentNode匹配的行-这将是包含它的行。下一步，我们将遍历cells集合并再次搜索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>


window.addEventListener（'load'，onDocLoaded，false）；
函数byId（id）{return document.getElementById（id）；}
HTMLCollection.prototype.forEach=Array.prototype.forEach；
函数onDocLoaded（evt）
{
//1.获取id=当前单元格
var curCell=byId（'current'）；
//2.获取当前行
var curRow=curCell.parentNode；
var table=curRow.parentNode.parentNode；//parentNode两次，因为我们同时使用table和tbody元素来包装行。
//3.获取表“行”集合中当前行的索引
var rowIndex=-1；
forEach（函数（elem，index，array）{if（elem==curRow）rowIndex=index；}）；
//4.获取表当前行“单元格”集合中当前单元格的索引
var cellIndex=-1；
table.rows[rowIndex].cells.forEach（函数（elem，index，array）{if（elem==curCell）cellIndex=index；}）；
//5.从原始目标单元格（id为“current”的单元格下方的单元格）获取数据
警报（table.rows[rowIndex-1].cells[cellIndex].getAttribute（'bgcolor'）；
警报（table.rows[rowIndex-1].cells[cellIndex].textContent）；
}
废话
您没有ID，也没有任何代码显示您已经尝试过，并且您正在使用不推荐的TD属性（bgcolor）-但没关系，有人会在没有时间的情况下为您完成工作@JaromandaX说，请提供您当前的工作。 
var color=$("#tdwithbgcolor").css("background-color");
$("#tdtosetcolor").css("background-color",color);

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