在html中向table中动态添加内容,并设置cell字体颜色
2016-08-18 15:04
633 查看
在html中向table中动态添加内容, 设置5秒取一次数,刷新, 整体的效果是在在每次取到告警后,将告警内容放在table最上方, 同时将告警内容那一列字体颜色设置为蓝色(并同时将原来的告警颜色恢复为黑色)
js中代码:
具体如图:
<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); } } } } });
具体如图:
相关文章推荐
- 用js操作table(tr,td) (包括TD内容的隐藏,背景颜色和字体的设置)
- EditText动态添加图片-----SpannableString来设置超链接、颜色、字体、图片属性
- andorid,动态设置TextView文本中字体的颜色和格式,用Html.fromHtml方法
- 动态添加GridView,并按照返回内容改变字体颜色
- 有CCS的情况下,如何动态设置gridview的字体颜色
- cxGrid 设置斑马线 根据记录内容更改字体颜色
- 【工作笔记】android TextView、EditText对部分内容设置颜色、字体、超链接、图片
- datagrid中格子和字体颜色根据格子内容动态变化的实现
- android TextView、EditText对部分内容设置颜色、字体、超链接、图片
- Extjs Grid根据行内容设置不用字体颜色
- HTML设置超链接字体颜色和点击后的字体颜色
- HTML中设置超链接字体颜色和点击后的字体颜色的方法
- android 的TextView空间动态设置字体颜色
- android TextView 结合SpannableString对部分内容设置颜色、字体、超链接、图片
- 动态设置编辑框的大小、 文本字体、颜色等
- html字体及颜色设置
- 图形的绘制,如何使用自定义画笔(颜色,线宽,线形)。如何为程序中添加选项菜单和选项设置对话框,如何使用标准颜色对话框,如何使用字体对话框,在选项对话框中实现预览功能。实现选项对话框和窗口类中的数据交换。如何改变对话框和控件的背景色,如何改变控件的文本颜色,
- 【代码示例】动态给HtmlTable添加行数据
- cxGrid 设置斑马线 根据记录内容更改字体颜色
- 自定义个性cmd界面 轻松打造个性的cmd 修改cmd字体颜色 添加个性cmd内容(转)