2016-03-19 23 views
1

私はストックマーケットで小さなプロジェクトをやっています。ここでは、のハイライトtdを変更する必要があります。データが変更されると、データが緑色に強調され、データが赤色に強調表示されます。tdの値が変更されたときにハイライトtdを変更したい

スニペットでは、 allow_url_open = 0にする必要があるため、結果を表示できません。

あなたが提供しているリンクは= bcontentidを持つテーブルをロードします:)

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>

答えて

1

はあなたには、いくつかのアイデアを得ることができるかもしれない、そこから機能的な例である:

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

...そうすることをどのように私を助けてください。 javascriptまたはjqueryを使用してnoを取得することができます。 tr/tdsをテーブルに格納し、変数に格納しておくと簡単に検出できます。それに応じて動作する。 jQueryを使って

、JavaScriptで

$('#bcontent tr').length; 

、ここで

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