Question

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

在Snippet中，您无法查看结果，因为您需要 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>

Answer 1

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

jsFiddle Demo

＆＃13;

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();

＆＃13;

table{border-collapse:collapse;}
td{width:50px;border:1px solid #ddd;padding:5px 10px;text-align:center;}
tr{background:#ddd;}

＆＃13;

<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>

＆＃13;

Answer 2

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

使用Jquery，

$('#bcontent tr').length;

使用javascript，

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

我想在td的值发生变化时更改突出显示td

2 个答案: