根据ajax提取的值更改html单元格边框
根据ajax提取的值更改html单元格边框
提问于 2018-02-26 14:05:42
编辑:所以在根据你的建议做了一些小的改动之后，我现在得到
未定义的TypeError:无法读取未定义的属性“toggleClass”
我有一个html表，它是由for循环创建的，它试图基于delivery_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
Stack Overflow用户
回答已采纳
发布于 2018-02-27 10:55:21
我已设法更改代码以解决此问题，方法如下：
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);
});Stack Overflow用户
发布于 2018-02-26 14:15:48
我想你想换掉这个
('border-color', 'lime','border-width', 'thick')在这方面：
{'border-color':'lime', 'border-width':'thick' }如果您是在jQuery调用中定义CSS，下面将更新CSS 使用类符号
$(`td.${item.beacon}`).css({'border-color':'lime', 'border-width':'thick' }).toggleClass('coloured');注意:根据文档，jQuery支持‘边框颜色’或'borderColor‘：
此外，jQuery也可以同样地解释CSS和DOM格式的多个字属性.例如，jQuery理解并返回.css({“背景颜色”："#ffe“、”边框-左“："5px实体#ccc”})和.css({backgroundColor："#ffe“、borderLeft："5px实体#ccc”})的正确值。注意，使用DOM表示法，属性名称周围的引号是可选的，但是对于CSS表示法，由于名称中的连字符，它们是必需的。
编辑：在上面的示例中，在$.get的回调中，将参数传递给addcolor函数，然后将addColor函数更改为$.get函数之外的addColor函数(应该只有一个定义--因为我在上面看到了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...'选择器实际上正在找到它。
Stack Overflow用户
发布于 2018-02-26 14:16:25
addColor中的返回语句是错误的。返回的实际值总是“粗”，最后一个元素。您应该返回的是一个属性值对对象来传递jquery方法(请参阅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' };页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48990360
复制相关文章
相似问题
腾讯云开发者
