JavaScript表格数据动态渲染及条件样式设置

function getrdata() { $.ajax({ url: "/right-table", success: function (response) { // 根据返回的数据更新表格内容 var data = response.data; for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { var cell = $('table#right-table tbody tr').eq(i).find('td').eq(j); cell.text(data[i][j]); if (j == 1) { // 判断无功列 if (data[i][j] > 200) { cell.css('color', 'red'); } else if (data[i][j] < 100) { cell.css('color', 'yellow'); } else { cell.css('color', 'black'); } } } } }, error: function (xhr, type, errorThrown) { console.log('Ajax error!') } }); }

这段代码展示了如何在 JavaScript 中使用 AJAX 获取数据并动态更新表格内容，并通过添加判断条件根据数据值设置单元格的字体颜色。

在这个示例中，我们判断第二列（无功列）的值，如果大于 200 则将字体设置为红色，小于 100 则设置为黄色，其他情况设置为黑色。

您可以根据实际需求修改判断条件和样式设置，例如在其他列上添加类似的判断条件，实现更多功能。