在html中向table中動態添加內容,並設置cell字體顏色

在html中向table中動態添加內容, 設置5秒取一次數,刷新, 整體的效果是在在每次取到告警後,將告警內容放在table最上方, 同時將告警內容那一列字體顏色設置爲藍色(並同時將原來的告警顏色恢復爲黑色)

<table id="table_id" class="am-table am-table-bordered am-table-radius am-table-striped" width="99%" height="125%" border="1"
                    align="center" cellpadding="0" cellspacing="0" bordercolor="a9cfa4"
                    style="table-layout: fixed;font-size: 10px;">
                </table>

js中代碼:

$.ajax({
    type: "POST",
    url: "",
    dataType: "text",
    async:false,
    success: function (result){
            var json = eval("(" + result + ")");
            var jsonlength = json.length;
            var s=document.getElementById("table_id");

            //在每次出現新的告警時,將table中所有的行,列字體顏色設置爲黑色
            for(var k=0;k<s.rows.length;k++){
                var rowtmp = s.rows[k];
                for(var m=0;m<rowtmp.cells.length;m++){
                    rowtmp.cells[m].style.color = "black";  //雙重循環設置所有的單元格字體顏色
                }
                //  rowtmp.style.color="black";  //設置行的字體顏色
                //  rowtmp.style.cssText="background-color:#c5e2e2";  //設置行的背景顏色
            }

            if(jsonlength != 0){
                for(var i = 0; i < jsonlength; i++){
                    //添加到滾動日誌框中
                    var n_summarycn = json[i].N_SummaryCN;// 告警內容
                    var nodeIp = json[i].nodeIP;// ip
                    var N_APPNAME = json[i].N_APPNAME;// 機構名稱

                    var x = s.insertRow(0);  //將在第一行添加

                    //每行添加列, 共有3列                       
                    var cell1 = x.insertCell(0);
                    cell1.innerHTML= N_APPNAME
                    cell1.setAttribute("width","8%");
                    cell1.setAttribute("align","center");

                    var cell2 = x.insertCell(1);
                    cell2.innerHTML=nodeIp
                    cell2.setAttribute("width","8%");
                    cell2.setAttribute("align","center");

                    var cell3 = x.insertCell(3);
                    cell3.innerHTML= n_summarycn
                    cell3.setAttribute("width","48%");
                    cell3.setAttribute("align","left");
                    cell3.setAttribute("title",n_summarycn);

                    //設置列的字體顏色, 使用cell3.setAttribute("class","fontColor");
                    //或者cell3.setAttribute("style","color:blue")也可以                 
                    cell3.setAttribute("style","");
                    cell3.style.color="blue";

                }
                var t=s.rows.length
                if (t > 100) {  //當table中行數超過100時,刪除最早的行
                    for (var m = 0; m < t - 100; m++) {
                        s.deleteRow(s.rows.length-1);
                    }
                }
            }
    }
}); 

具體如圖:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章