代码之家 › 专栏 › 技术社区 › Avalon Parkes-Barton

根据ajax引入的值更改html单元格边框

ajax html javascript

Avalon Parkes-Barton · 技术社区 · 8 年前

编辑:所以根据你的建议做了一些小改动后,我现在得到

未捕获的TypeError:无法读取未定义的属性“toggleClass”

我有一个由for loop创建的html表,我试图根据delivery\u avg更改边框颜色,delivery\u avg是使用ajax拉入的

我可以让它工作,使边界改变的位置(一种颜色),但不能让它在交付时改变平均值,因为你可以从下面看到,我试图让它改变为石灰,如果值低于10,橙色,如果介于10和20之间,粉红色,如果介于20和30之间

ajax传输的数据如下所示:

{beacon: "59", location: "YELLOW", delivery_avg: "04.48"}

因此,这可能意味着细胞边界变为石灰色,但仍保持原来的黑色。

有人知道我哪里出错了吗?

HTML:

<!doctype html>

<html>
  <head>
    <title>Table</title>
    <style>
    table {
        padding: 10px 30px;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }

    table, td, th {
        border: 1px solid black;    
        cellpadding: 5;
        cellspacing: 5;
        text-align: center; 
        vertical-align: middle;
        font-size: 40px;
        background-color: #8F8F8F;
    }
    </style>
    <script> <!-- see javascript below --> </script>
  </head>
  <body>
    <table id='zoning'>
      <tbody></tbody>
    </table>
  </body>
</html>

Javascript:

function addColor() {
{
    if (item.delivery_avg <= 10.00) {
        return ('border-color', 'lime','border-width', 'thick');
    } else if (item.delivery_avg>= 10.01 && item.delivery_avg<= 20.00) {
        return ('border-color', 'brightorange','border-width', 'thick');
    } else if (item.delivery_avg>= 20.01 && item.delivery_avg<= 30.00) {
        return ('border-color', 'pink','border-width', 'thick');
    }
};
}
$(document).ready(function() {
    for (var i = 0; i < 12; i++) {
        var row = $('<tr>').appendTo("#zoning tbody");
        for (var j = 1; j < 11; j++) {
            $(`<td class='${i * 10 + j}'>${i * 10 + j}</td>`).appendTo(row);
        }
    }

    $.get('php/beacon.php', function(response) {
        console.log(response);
        var row;
        response.forEach(function(item, index) {
            console.log(item);
function addColor() {
{
    if (item.delivery_avg <= 10.00) {
        return ('border-color', 'lime','border-width', 'thick');
    } else if (item.delivery_avg>= 10.01 && item.delivery_avg<= 20.00) {
        return ('border-color', 'brightorange','border-width', 'thick');
    } else if (item.delivery_avg>= 20.01 && item.delivery_avg<= 30.00) {
        return ('border-color', 'pink','border-width', 'thick');
    }
};
}
            $(`td.${item.beacon}`).css(addColor() ).toggleClass('coloured');
        });
    });


        function updateTable() {
        //console.log('function called');
        $('td.coloured').css('border-color','black').toggleClass('coloured');
        $.get('php/beacon.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.beacon);
                //$('td.coloured').css('border-color','#black').toggleClass('coloured');
        $(`td.${item.beacon}`).css(addColor()).toggleClass('coloured');
            });
        });

    }
    var updateTableInterval = setInterval(updateTable, 30000);
});

3 回复 | 直到 8 年前

Brian Mains 8 年前

我想你要换这个

('border-color', 'lime','border-width', 'thick')

使用此选项:

{'border-color':'lime', 'border-width':'thick' }

如果您在jQuery调用中定义CSS,下面将更新CSS using class notation :

$(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');

注意:根据文档,jQuery支持“border color”或“borderColor”:

此外,jQuery同样可以解释多个单词属性。例如,jQuery理解并返回两者的正确值。css({“background color”:“#ffe”, “border left”:“5px solid#ccc”})和。css({背景颜色:“#ffe”, borderLeft:“5px实心#ccc”})。注意,使用DOM表示法, 属性名称周围的引号是可选的,但使用CSS 由于名称中的连字符,需要它们。

编辑 :在上面的示例中,在 $.get ,将参数传递给addcolor函数,然后将addcolor函数更改为在$之外。get函数(应该只有1个定义-请注意,因为我在上面看到了2个):

function addColor(item) {
{
    if (item.delivery_avg <= 10.00) {
        return { 'border-color': 'lime','border-width': 'thick' };
    } else if (item.delivery_avg>= 10.01 && item.delivery_avg<= 20.00) {
        return {'border-color': 'brightorange','border-width': 'thick' };
    } else if (item.delivery_avg>= 20.01 && item.delivery_avg<= 30.00) {
        return { 'border-color': 'pink','border-width': 'thick' };
    }
};

.
.


$.get('php/beacon.php', function(response) {
    console.log(response);
    var row;
    response.forEach(function(item, index) {
        console.log(item);

        $('td." + item.beacon + "').css( addColor(item) ).toggleClass('coloured');
    });
});

注意:如果找不到,请确保 $('td...' 选择器实际上正在找到它。

Onyx Caldin 8 年前

addColor中的返回语句错误。您返回的实际值始终是最后一个元素“thick”。您应该返回一个属性值对的对象,以传递jquery css方法(请参见 http://api.jquery.com/css/#css-properties ) :

if (item.delivery_avg <= 10.00) {
    return ('border-color', 'lime','border-width', 'thick');

应该成为

if (item.delivery_avg <= 10.00) {
    return { borderColor : 'lime', borderWidth : 'thick' };

Avalon Parkes-Barton 8 年前

我已通过以下方式更改代码以解决此问题:

function updateTable() {
        //console.log('function called');
        $('td.coloured').css('background-
color','#8F8F8F').toggleClass('coloured');
        $.get('php/del.php', function(response) {
            response.forEach(function(item, index) {
                console.log(item.beacon);
                //$('td.coloured').css('background-color','#8F8F8F').toggleClass('coloured');
        $(`td.${item.beacon}`).css('background-color', item.location).toggleClass('coloured');
        if (item.delivery_avg <= 10.00) {
                return $(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');
             } else if (item.delivery_avg >= 10.01 && item.delivery_avg <= 20.00) {
                 return $(`td.${item.beacon}`).css({'border-color':'orange', 'border-width':'thick' }).toggleClass('coloured');
             } else if (item.delivery_avg >= 20.01 && item.delivery_avg <= 30.00) {
                return $(`td.${item.beacon}`).css({'border-color':'pink', 'border-width':'thick' }).toggleClass('coloured');
              }
            });
        });

    }
    var updateTableInterval = setInterval(updateTable, 5000);
});