Fatal编程技术网
  • jquery/
  • Jquery 表，填写JSON，淡入淡出新项和丢失项

Jquery 表，填写JSON，淡入淡出新项和丢失项

jquery json colors

Jquery 表，填写JSON，淡入淡出新项和丢失项,jquery,json,colors,html-table,fade,Jquery,Json,Colors,Html Table,Fade,我有一个充满JSON数据的表。表每5秒刷新一次（ajax）。我想有新的项目褪色，细胞应该是绿色的5秒钟。丢失的物品应涂上红色5秒钟，然后消失。有什么简单的解决办法吗？我是否必须将丢失的物品存储在新阵列中 <!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="http://code.jquery.com/jquery

我有一个充满JSON数据的表。表每5秒刷新一次（ajax）。我想有新的项目褪色，细胞应该是绿色的5秒钟。丢失的物品应涂上红色5秒钟，然后消失。有什么简单的解决办法吗？我是否必须将丢失的物品存储在新阵列中

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<table class="table table-condensed" border="1" id="usertable"></table>
<script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<div class="alert alert-success">
  <a href="#" class="alert-link">Die Übersicht zu Drive-Now München lädt... Bitte einen Moment Geduld!</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
function callJSON() {
    setTimeout(function () {
        $.getJSON('./url.php', function(data) {
            $ ("#usertable").empty();
            var cars = data.rec.vehicles.vehicles;
            //cars.sort(function(el1,el2){ return el1.model == el2.model ? 0 : (el1.model < el2.model ? -1 : 1); });
            cars.sort(function(el1, el2) {
            if(el1.model== el2.model) {
            if(el1.fuelState == el2.fuelState) {
            return 0;
            } else if(el1.fuelState < el2.fuelState) {
            return -1;
            } else {
            return 1;
            }
            } else if(el1.model < el2.model) {
            return -1;
            } else {
            return 1;
            }
            });
            /*cars.sort(function(a,b) {
            return parseFloat(b.fuelState) - parseFloat(a.fuelState);
             });*/
               $.each(cars, function(key, data){
        var laenge=cars.length;
                var vint=data.vin;
                var coopers="";
                var tanken="";
                var drive="MAN";
                var fuelfarbe="#01DF3A";
                var prozent="%";
                var kosten=" 31 Cent/Min "
                var tanksymbol="glyphicon-tint";
                var farbe="success";
                var flugbadge="";
                var ortbadge="glyphicon-map-marker";
                var v=vint.substring(3,7);
                if(v=="SX31"){coopers=" S";}
                if(v=="SW71"){coopers=" SD";}
                if(data.model=="BMW ActiveE "){tanksymbol="glyphicon-flash";}
                if(data.model=="BMW X1 "){kosten=" 34 Cent/Min ";}
                if(data.auto=="Y"){drive="AUT";}
                if((48.347910654607695 < data.position.latitude && data.position.latitude < 48.35988839686733)&&(11.781678199768066 < data.position.longitude && data.position.longitude < 11.792492866516113)){flugbadge="<span class='badge'>+12€</span>"; ortbadge="glyphicon-plane";}
                if(data.fuelState<=25){tanken="20 Freiminuten für Vollbetankung"; farbe="warning";}
                $('#usertable').append(
                    function() {
                        return "<tr class="+farbe+">"+
                                    "<td>"+data.model+coopers+"</td>"+
                                    "<td><span class='glyphicon glyphicon-user'></span> "+data.carName+"</td>"+
                                    //"<td><span class='glyphicon glyphicon-time'></span> "+dur+"</td>"+
                                    "<td>"+drive+"</td>"+
                                    "<td><span class='glyphicon "+tanksymbol+"'></span>" +data.fuelState+"</td>"+
                                    "<td>"+data.licensePlate+"</td>"+
                                    "<td><span class='glyphicon "+ortbadge+"'></span> "+data.address+"</td>"+
                                    "<td><span class='glyphicon glyphicon-euro'></span>"+kosten+flugbadge+"</td>"+
                                    "<td>"+laenge+"</td>"+
                                    "<td><a href='https://de.drive-now.com/php/metropolis/vehicle_details?vin="+ data.vin +"'target='_blank'><button class='btn btn-success btn-xs' type='button'>Reservieren</button></a></td>"+

                                    //"<td><img src='"+data.model+"1.png'/></td>"+
                                "<tr>"; 
                    }
                );
            })
        }).always(callJSON);
    }, 2000);
    }
    $(callJSON);
    });
</script>
</body>
</html>


测试
$（文档）.ready（函数（）{
函数callJSON（）{
setTimeout（函数（）{
$.getJSON（'./url.php'，函数（数据）{
$（“#usertable”）.empty（）；
var cars=data.rec.vehicles.vehicles；
//sort（函数（el1，el2）{return el1.model==el2.model？0:（el1.model如果（data.fuelState您可以执行以下操作：


$("#elementId").css('background-color', 'red').delay(5000).fadeOut(function(){$(this).remove());



选择元素，将其涂成红色，等待5秒钟，将其淡出，最后将其删除。
我必须在哪里实现您的代码？ans我的元素id是什么？：）元素会自行删除，因为它在原始JSON中丢失。因此我不必手动删除它？我认为这就是问题所在。不要执行
$（“#usertable”）。empty（）
。当您收到新的JSON时，搜索其中的更改。对于每个元素，检查它是否已经在表中。