我有这个 Javascript 可以根据其中的值将 td 表的颜色转换为特定颜色:
$(document).ready(function () {
$('#headerTbl td').each(function () {
if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
$(this).css('background-color', '#F15854');
}
else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
$(this).css('background-color', '#DECF3F');
}
else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
$(this).css('background-color', '#5DA5DA');
}
})
});
我还使用推送 javascript 将这些 td 加载到表中:
function getData() {
var $tblpercent = $('#headerTbl');
$.ajax({
url: '../api/data',
type: 'GET',
datatype: 'json',
success: function (data) {
if (data.length > 0) {
$tbl.empty();
var rows2 = [];
for (var i = 0; i < data.length; i++) {
rows2.push('<td>' + data[i].percentage + '</td>');
}
$tblpercent.append(rows2.join(''));
}
}
});
};
如何让 javascript css 为附加的 tds 工作?
最佳答案
你再次运行它。首先,将其隔离成自己的功能:
function setBackgroundsOnCells() {
$('#headerTbl td').each(function() {
if (parseInt($(this).text(), 10) >= 0 && parseInt($(this).text(), 10) <= 69) {
$(this).css('background-color', '#F15854');
}
else if (parseInt($(this).text(), 10) >= 70 && parseInt($(this).text(), 10) <= 89) {
$(this).css('background-color', '#DECF3F');
}
else if (parseInt($(this).text(), 10) >= 90 && parseInt($(this).text(), 10) <= 100) {
$(this).css('background-color', '#5DA5DA');
}
})
}
然后从 ready
处理程序和 ajax 完成处理程序调用它。
旁注:我建议不要将您的背景颜色放入 JavaScript 代码中。相反,理想情况下,在生成 td
元素时放置一个类来指示它们应该是什么颜色。如果由于某种原因您不能这样做,请调整上面的代码以根据内容添加类。那么至少颜色在 CSS 而不是代码中。
关于在另一个 JS 完成后加载 Javascript CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41606849/