table 个元素的闪光颜色

Question

我有一个很大的 table 单元格，其中包含各种单词。我想找到所有文本为 "Failed" 的单元格，开始所有单元格在红色和透明之间闪烁，然后停止闪烁任何被点击的单元格（但让其他单元格继续闪烁，直到一个一个被点击).

我找到了一种方法来找到带有 "Failed" 的每个单元格并为其分配一个 class：

function updateTableColors() {
    // first 3 rows are headers
    var numCols = document.getElementById("vimTable").rows[4].cells.length;

    for(var i = 1; i < numCols; i++) {
        $( '#vimTable td:nth-child(' + i + ')' ).each(function() {
            var cellText = $(this).text();

            if(cellText === "Failed") {
                $(this).removeClass();
                $(this).addClass("failed");
            }
            else if( cellText === "") { 
                             // cell doesn't contain text (could be image)
                // nothing for now
            }
            else {
                $(this).removeClass();
            }                   
        });
    }

    return false;
}

// Re-run formatting on click
document.onclick = function() {
    updateTableColors();
}

我的攻击计划是用 "failed" class 检查每个元素，然后切换它是否具有 "failed_red" 或 "failed_transparent" class 并以此为基础给它一个颜色，但如果不通过唯一的 id 遍历每个元素，我还没有成功地做到这一点。感谢您的帮助！

注意：我也在使用jquerydataTables插件（datatables.net），我的解决方案无法使用HTML5.

编辑：jQuery toggleClass() 方法在这里非常有用。

Answer 1

使用jquery访问具有特定class组合的所有元素：

$('.failed.failed_red').css('background-color', 'red');

和

$('.failed.failed_transparent').css('background-color', 'none');

table 个元素的闪光颜色

Flash color of table elements

html

css

jquery

jquery-datatables