如何让表格stat类单元格随动态文本变化自动变色？

安全阿岳

2026-8-6

问题描述

我正尝试让表格中stat类单元格/列根据单元格内的文本内容改变颜色。我通过Arduino采集多台设备的数据，并通过XML文件将数据导出到网页，这一功能运行正常。但现在我希望stat类单元格能根据设备状态显示不同颜色，我在论坛找到的相关示例均无法生效。

JavaScript（获取XML数据）

function GetArduinoInputs()
{
    nocache = "&nocache=" + Math.random() * 1000000;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (this.readyState == 4) {
            if (this.status == 200) {
                if (this.responseXML != null) {
                    // extract XML data from XML file
var count;
// get status
var num_an = this.responseXML.getElementsByTagName('stat').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("stat")[count].innerHTML =
        this.responseXML.getElementsByTagName('stat')[count].childNodes[0].nodeValue;
}
// get temperatuur
var num_an = this.responseXML.getElementsByTagName('temp').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("temp")[count].innerHTML =
        this.responseXML.getElementsByTagName('temp')[count].childNodes[0].nodeValue;
}
// get tijd
var num_an = this.responseXML.getElementsByTagName('tijd').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("tijd")[count].innerHTML =
        this.responseXML.getElementsByTagName('tijd')[count].childNodes[0].nodeValue;
}
// get eenheid
var num_an = this.responseXML.getElementsByTagName('eenheid').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("eenheid")[count].innerHTML =
        this.responseXML.getElementsByTagName('eenheid')[count].childNodes[0].nodeValue;
}
                }
            }
        }
    }
    request.open("GET", "ajax_inputs" + nocache, true);
    request.send(null);
    setTimeout('GetArduinoInputs()', 1000);
}

HTML结构

<body onload="GetArduinoInputs()" style="background-color:#FEF7A2;">

<h1 style="font-size:55px;">Monitor</h1>

    <table id="table_id">
 <tr>
       <th>Div 1</th>
       <th>Div 2</th>
       <th>Div 3</th>
       <th>Div 4</th>
       <th>Div 5</th>
       <th>Div 6</th>
 </tr>
 <tr>
   <td class="stat">...</td>
   <td><span class="stat">...</span></td>
       <td><span class="stat">...</span></td>
       <td><span class="stat">...</span></td>
   <td><span class="stat">...</span></td>
       <td><span class="stat">...</span></td>
  </tr>
  <tr>
    <td><span class="temp">...</span>&#176;C</td>
    <td><span class="temp">...</span>&#176;C</td>
    <td><span class="temp">...</span>&#176;C</td>
        <td><span class="temp">...</span>&#176;C</td>
        <td><span class="temp">...</span>&#176;C</td>
        <td><span class="temp">...</span>&#176;C</td>
  </tr>
  <tr>
    <td><span class="tijd">...</span><span class="eenheid">...</span></td>
    <td><span class="tijd">...</span><span class="eenheid">...</span></td>
    <td><span class="tijd">...</span><span class="eenheid">...</span></td>
        <td><span class="tijd">...</span><span class="eenheid">...</span></td>
        <td><span class="tijd">...</span><span class="eenheid">...</span></td>
        <td><span class="tijd">...</span><span class="eenheid">...</span></td>
 </tr>
</table>
</body>

我曾使用以下jQuery代码，手动填写单元格文本时能实现变色，但当数据来自XML动态加载后就失效了：

$(document).ready(function(){
    $('#table_id td.stat').each(function(){
        if ($(this).text() == 'Klaar') {
            $(this).css('background-color','#32CD32');
        } else if ($(this).text() == 'Aan') {
            $(this).css('background-color','#FED129');
        } else if ($(this).text() == 'Uit') {
            $(this).css('background-color','#FEAD29');
        } else if ($(this).text() == 'ERROR') {
            $(this).css('background-color','#FF4500');
        } 
    });
});

解决方案

问题根源是你的jQuery代码仅在页面初始化时执行一次，而XML动态更新数据后没有重新触发颜色设置逻辑。需要在每次更新stat元素内容后，立即调用颜色更新函数。

步骤1：封装颜色设置逻辑为独立函数

function updateStatColors() {
    $('.stat').each(function(){
        const text = $(this).text().trim(); // 去除文本前后空白，避免匹配失败
        if (text == 'Klaar') {
            $(this).css('background-color','#32CD32');
        } else if (text == 'Aan') {
            $(this).css('background-color','#FED129');
        } else if (text == 'Uit') {
            $(this).css('background-color','#FEAD29');
        } else if (text == 'ERROR') {
            $(this).css('background-color','#FF4500');
        } else {
            // 未知状态时重置背景色，可选
            $(this).css('background-color','');
        }
    });
}

注：选择器改用.stat，覆盖HTML中td.stat和span.stat两种情况，避免遗漏。

步骤2：在XML数据更新后调用函数

修改GetArduinoInputs函数，在更新完所有stat元素内容后，立即调用updateStatColors()：

function GetArduinoInputs()
{
    nocache = "&nocache=" + Math.random() * 1000000;
    var request = new XMLHttpRequest();
    request.onreadystatechange = function()
    {
        if (this.readyState == 4) {
            if (this.status == 200) {
                if (this.responseXML != null) {
                    // extract XML data from XML file
var count;
// get status
var num_an = this.responseXML.getElementsByTagName('stat').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("stat")[count].innerHTML =
        this.responseXML.getElementsByTagName('stat')[count].childNodes[0].nodeValue;
}
// 新增：更新完stat内容后立即设置颜色
updateStatColors();

// get temperatuur
var num_an = this.responseXML.getElementsByTagName('temp').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("temp")[count].innerHTML =
        this.responseXML.getElementsByTagName('temp')[count].childNodes[0].nodeValue;
}
// get tijd
var num_an = this.responseXML.getElementsByTagName('tijd').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("tijd")[count].innerHTML =
        this.responseXML.getElementsByTagName('tijd')[count].childNodes[0].nodeValue;
}
// get eenheid
var num_an = this.responseXML.getElementsByTagName('eenheid').length;
for (count = 0; count < num_an; count++) {
    document.getElementsByClassName("eenheid")[count].innerHTML =
        this.responseXML.getElementsByTagName('eenheid')[count].childNodes[0].nodeValue;
}
                }
            }
        }
    }
    request.open("GET", "ajax_inputs" + nocache, true);
    request.send(null);
    setTimeout('GetArduinoInputs()', 1000);
}

步骤3：页面初始化时调用（可选）

如果需要给页面初始的...设置默认颜色，可在$(document).ready中调用一次：

$(document).ready(function(){
    updateStatColors();
});

额外优化建议

用CSS类代替直接设置内联样式，更易维护和扩展：

.stat-klaar { background-color: #32CD32; }
.stat-aan { background-color: #FED129; }
.stat-uit { background-color: #FEAD29; }
.stat-error { background-color: #FF4500; }

修改updateStatColors函数：

function updateStatColors() {
    $('.stat').each(function(){
        const $el = $(this);
        const text = $el.text().trim();
        // 先移除所有状态类，避免样式叠加
        $el.removeClass('stat-klaar stat-aan stat-uit stat-error');
        // 添加对应状态类
        if (text == 'Klaar') {
            $el.addClass('stat-klaar');
        } else if (text == 'Aan') {
            $el.addClass('stat-aan');
        } else if (text == 'Uit') {
            $el.addClass('stat-uit');
        } else if (text == 'ERROR') {
            $el.addClass('stat-error');
        }
    });
}

内容的提问来源于stack exchange，提问作者Michael

如何让表格stat类单元格随动态文本变化自动变色？

JavaScript（获取XML数据） #

HTML结构 #

步骤1：封装颜色设置逻辑为独立函数 #

步骤2：在XML数据更新后调用函数 #

步骤3：页面初始化时调用（可选） #