Question

我目前有一个1-120表，在页面刷新时更新，以更改单元格颜色，这取决于通过PHP文件和html中的ajax请求引入的mysql值，但更新表我必须有一个强制页面刷新如何更改它，以便只是单元格更新颜色而不是刷新整个页面？我确实有一个带有刷新选项的元标记，但理想情况下只需要表格，甚至更好的只是表格单元格更新为php文件。

<html>
<head>
<title>Table Tracker</title>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/materialize.min.css">
<script src="js/materialize.min.js"></script>
<link rel="stylesheet" href="css/full.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script>html5.addElements('latest_beacons')</script>
<![endif]-->
<script>

$(document).ready(function upateTable()(){
    for(var i=0; i < 12 ; i++) {
        var row = $('<tr>').appendTo("#zoning tbody");
        for(var j=1; j < 11 ; j++) {
            $(`<td class='${i*10 + j}'>${i*10 + j}</td>`).appendTo(row);
        }
    }

    $.get('php/beacon.php',function(response){
        console.log(response);
        var row;
        response.forEach(function(item, index) {
            console.log(item);
            $(`td.${item.beacon}`).css('background-color',item.location);
        });
    });
});
</script>

</head>

<body>
<table id='zoning'>
    <tbody></tbody>
</table>
</body>

</html>

谢谢

Answer 1

鉴于您想要自动更新数据（在Elias答案中发表评论），您只需使用setInterval，在这种情况下，它将每5秒更新一次数据：

<script>    
$(document).ready(function() {
        for (var i = 0; i < 12; i++) {
            var row = $('<tr>').appendTo("#zoning tbody");
            for (var j = 1; j < 11; j++) {
                $(`<td class='${i * 10 + j}'>${i * 10 + j}</td>`).appendTo(row);
            }
        }

        $.get('php/beacon.php', function(response) {
            console.log(response);
            var row;
            response.forEach(function(item, index) {
                console.log(item);
                $(`td.${item.beacon}`).css('background-color', item.location);
            });
        });

        function upateTable() {
            $.get('php/beacon.php', function(response) {
                response.forEach(function(item, index) {
                    console.log(item);
                    $(`td.${item.beacon}`).css('background-color', item.location);
                });
            });
        }
        var updateTableInterval = setInterval(upateTable, 5000);
    });
</script>

如果您想在某个时刻取消自动刷新，可以使用以下方法清除计时器：

clearInterval(updateTableInterval);

更新html表而不更新页面

1 个答案: