2016-03-19 5 views
1

Ich mache ein kleines Projekt an der Börse. Hier muss ich die Highlight die td ändern, sobald sich die Daten ändern und wenn Daten erhöht dann grün markieren und wenn Daten verringern dann rot markieren.Ich möchte die highlight td ändern, wenn sich der Wert von td ändert

In Snippet müssen Sie das Ergebnis nicht sehen können, weil Sie allow_url_open = 0 benötigen.

Bitte helfen Sie mir, wie dies zu tun ... :)

function loadlink() { 
 
    $('#stockdata').load('http://techsoul.in.md-in-1.webhostbox.net/hostedsite/demo/mockup/stockapi/stockshow.php?api=Y', function() { 
 
     $(this).unwrap(); 
 
    }); 
 
    } 
 

 
loadlink(); // This will run on page load 
 
setInterval(function() { 
 
    loadlink() // this will run after every 5 seconds 
 
}, 5000); 
 

 
$("td").change(function() { 
 
    $(this).effect("highlight", {}, 3000); 
 
});
<body> 
 
    <div style="margin:0 auto; width:500px;" id="stockdata">Loading...</div> 
 
</body>

Antwort

1

Hier ist ein Funktionsbeispiel, aus dem Sie ein paar Ideen bekommen vielleicht in der Lage:

jsFiddle Demo

var o1=0,o2=0,o3=0; 
 
function getRandomInt(min, max) { 
 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
 
} 
 

 
function updateTable(){ 
 
    //Next 3 lines just get the latest stock market values 
 
    var t1 = getRandomInt(10,99); 
 
\t var t2 = getRandomInt(10,99); 
 
\t var t3 = getRandomInt(10,99); 
 

 
    //Compare to previous values (O = Old) 
 
    var u1 = (t1 < o1) ? 'lightpink' : 'palegreen'; 
 
    var u2 = (t2 < o2) ? 'lightpink' : 'palegreen'; 
 
    var u3 = (t3 < o3) ? 'lightpink' : 'palegreen'; 
 

 
    //Update table with new values 
 
    $('#td1').text(t1); 
 
    $('#td2').text(t2); 
 
    $('#td3').text(t3); 
 

 
    //Colorize rows 
 
    $('#tr1').css({'background-color': u1}); 
 
    $('#tr2').css({'background-color': u2}); 
 
    $('#tr3').css({'background-color': u3}); 
 

 
    //Save current values as OLD values (for next time comparision) 
 
    o1 = t1; o2 = t2; o3 = t3; 
 

 
    //Delay 1.5 seconds and re-run 
 
    setTimeout(function(){ 
 
     updateTable(); 
 
    },1500); 
 

 
} 
 

 
updateTable();
table{border-collapse:collapse;} 
 
td{width:50px;border:1px solid #ddd;padding:5px 10px;text-align:center;} 
 
tr{background:#ddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
<tr id="tr1"><td>One:</td><td id="td1" class="tdval">Microsoft</td></tr> 
 
<tr id="tr2"><td>Two:</td><td id="td2" class="tdval">Exxon</td></tr> 
 
<tr id="tr3"><td>Three:</td><td id="td3" class="tdval">Apple</td></tr> 
 
</table>

0

Der Link, den Sie lädt eine Tabelle mit id = bcontent zur Verfügung gestellt haben. Sie können Javascript oder Jquery verwenden, um die Nr. Zu erhalten. von tr/tds in der Tabelle und speichern sie in einer Variablen und dann können Sie leicht erkennen, wenn nein. von Reihen haben zugenommen oder verringert und handeln dementsprechend.

Mit JQuery,

$('#bcontent tr').length; 

Mit Javascript,

document.getElementById("bcontent ").rows.length; 
Verwandte Themen