Question

我使用jQuery / AJAX每10秒更新一次表。有时候背景颜色的设置会改变，我需要更新背景颜色。我的代码改变了HTML，但td仍未使用新的背景颜色进行更新。

<table border="1" style = "text-align:center; width:80%" align="center">
    <tr>                
        <td id = "{{item.id}}"  
            style = "background-color:{{item.bgColor.bgColor}}; width:10%">
            <a  id = "{{item.id}}/" class = "bgColor" 
                href="{{item.bgColor.id}}/">
                <span id = "{{item.id}}" class = "bgColor">
                    {{item.bgColor}}
                </span>
            </a>
        </td>
    </tr>
</table>

<script>
var loadTime = Date.now();

function updatePage() 
{   
    $.post(postURL, function(results) 
    {
        for (var loop in results)
        {
            var data = results[loop],
                colorData = $("td#" + data.id),
                colorCell = $("span#" + data.id + ".bgColor"),
                colorLink = $("a#" + data.id + ".bgColor");             

            colorData.css("backgroundColor", data.bgColor.bgColor)
            colorCell.text(data.bgColor.bgColor)
            }
    }, "json");     
    loadTime = Date.now();          
}

var myVar = setInterval( function() {updatePage()}, 10000);
</script>

这是更新前HTML的相关部分：

<td id = "6"  
    style = "background-color:LightGray; width:10%">
    <a  id = "6" class = "bgColor" 
        href="6/">
        <span id = "6" class = "bgColor">
            LightGray
        </span>
    </a>
</td>

这是更新后HTML的相关部分：

<td id = "6"  
    style = "background-color:Red; width:10%">
    <a  id = "6" class = "bgColor" 
        href="6/">
        <span id = "6" class = "bgColor">
            Red
        </span>
    </a>
</td>

样式正确更新但背景颜色不会改变。没有与td标签关联的外部样式表。

Answer 1

我通过对一些事情进行硬编码并使其工作，在JSFiddle上调整了代码。如果你说HTML正在更新，那么我会认为它的工作方式是一样的。您可能需要将我的代码与我的代码进行比较，看看有什么区别。

在此处使用它：https://jsfiddle.net/mgfqy9ks/3/

<table border="1" style = "text-align:center; width:80%" align="center">
        <tr>                
            <td id = "6"  
                style = "background-color:blue; width:10%">
                <a  id = "6/" class = "bgColor" 
                    href="6/">
                    <span id = "6" class = "bgColor" style='color:white;'>
                        Blue
                    </span>
                </a>
            </td>
            <td id = "7"  
                style = "background-color:blue; width:10%">
                <a  id = "7/" class = "bgColor" 
                    href="7/">
                    <span id = "7" class = "bgColor" style='color:white;'>
                        Blue
                    </span>
                </a>
            </td>
        </tr>
    </table>
    <button onclick='updatePage();'>Update</button>

    <script>
        function updatePage() 
    {   
        var results = [{id:6,bgColor:{bgColor:'Orange'}},{id:7,bgColor:{bgColor:'Red'}}];
        for(loop in results){
            var data = results[loop],
                colorData = $("td#" + data.id),
                colorCell = $("span#" + data.id + ".bgColor"),
                colorLink = $("a#" + data.id + ".bgColor");             

            colorData.css("backgroundColor", data.bgColor.bgColor);
            colorCell.text(data.bgColor.bgColor);
        }
    }
    </script>

在开发人员工具中检查您的控制台，看看是否有任何错误。

jQuery不会更新td背景颜色 - 包含的代码

1 个答案: