个人中心
gpt4 book ai didi

javascript - 我想在 td 的值发生变化时更改高亮 td

转载 作者：行者123 更新时间：2023-11-28 16:26:04 25 4
gpt4 key购买 nike

我正在 Stock Market 上做一个小元素。在这里，我需要在数据发生变化时立即将 highlight 更改为 td，如果数据增加则绿色突出显示，如果数据减少则红色突出显示。

In Snippet you must not able to see the result because you need to 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 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);
	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>

关于javascript - 我想在 td 的值发生变化时更改高亮 td，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36097083/

25 4 0
文章推荐： javascript - 脚本变得无响应导致 Firefox 崩溃
文章推荐： html - CSS 选择器 - 选择所需选择的第一个选项
文章推荐： javascript - 将带有参数的函数作为参数传递给 jQuery 的回调
文章推荐： javascript - jquery 中 $.get 之后丢失选择器