我想在 td 的值发生变化时更改突出显示的 td - I want to Change the highlight td when value of td changes

I want to Change the highlight td when value of td changes

本文关键字：td 显示变化 | 更新日期: 2023-09-27

我正在做一个关于股票市场的小项目。在这里，我需要在数据更改后立即更改突出显示td，如果数据增加，则绿色突出显示，如果数据减少，则红色突出显示。

在代码段中，您一定无法看到结果，因为您需要 allow_url_open=0。

请帮我怎么做... :)

  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>

下面是一个功能示例，您可以从中获得一些想法：

jsFiddle 演示

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);
	var t2 = getRandomInt(10,99);
	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>

您提供的链接加载一个包含 id=bcontent 的表。你可以使用 javascript 或 jquery 来获取 no。表中的 tr/tds 并将它们存储在变量中，然后您可以轻松检测是否否。的行增加或减少并相应地采取行动。

有了Jquery，

$('#bcontent tr').length;

使用javascript，

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