这几天在项目中,需要对页面一个表格的数据做更改如果,从数据库中获取的数据都是以MB为单位,视觉上不够直观,需要进行更改,因此在页面加载后就需要立即修改各种数值:
采用方法如下:
1.页面引入jquery,使用就绪函数,这样页面加载就可以调用函数进行表格数值更改:
$(document).ready(function(){
changeTotalSpace();
changUsedSpace();
changeMemUsedRate();
changeCpuUsedRate();
});
2.使用jquery的eq选择器选择表格,此时需要表格ID,因此设置表格ID:
3.使用each()方法逐一修改列表td中的每个值并使用html()重新设置td的html内容:
function changeTotalSpace(){
$('#test tr').each(function (){
var totalSpace = $(this).children('td').eq(1).text();
totalSpace = parseFloat(totalSpace);
if (!isNaN(totalSpace)) {
//alert("totalSpace: " + totalSpace);
if (totalSpace >= (1024*1024)) {
var tempSpace = totalSpace/1024/1024 + "";
var index = tempSpace.indexOf(".");
if (index > 0) {
var length = tempSpace.substring(index+1).length;
if (length > 3) {
tempSpace = tempSpace.substring(0,index+3);
}
}
var textContent = "<div align='center'><span class='STYLE3'>" + tempSpace + " (TB)</span></div>";
$(this).children('td').eq(1).html(textContent)
} else if (totalSpace >= 1024) {
var tempSpace = totalSpace/1024 + "";
var index = tempSpace.indexOf(".");
if (index > 0) {
var length = tempSpace.substring(index+1).length;
if (length > 3) {
tempSpace = tempSpace.substring(0,index+3);
}
}
var textContent = "<div align='center'><span class='STYLE3'>" + tempSpace + " (GB)</span></div>";
$(this).children('td').eq(1).html(textContent)
} else {
var textContent = "<div align='center'><span class='STYLE3'>" + totalSpace + " (GB)</span></div>";
$(this).children('td').eq(1).html(textContent)
}
}});
}