js表格自动隔行变色

2022-04-09 15:30:16

Css代码  js表格自动隔行变色
  1. tr.odd td {  
  2.     color: #223;  
  3.     background-color: #ec8;  
  4. }  
  5. tr.highlight td {  
  6.     color: #223;  
  7.     background-color: #e3e3e3;  
  8. }   

 asda

Java代码  js表格自动隔行变色
  1. /** 
  2. * 隔行换色，鼠标移动上色 
  3. * Create by phoenix @ 2013-11-19 
  4. */  
  5.   
  6. (function ($) {  
  7.     $.fn.tabChColor = function (options) {  
  8.         var options = options || {};  
  9.           
  10.         $(this).find('tr:even').addClass('smallblack');  
  11.           
  12.         $(this).find('tr').hover(  
  13.             function () {  
  14.                 $(this).addClass('overcolor');  
  15.             },  
  16.             function () {  
  17.                 $(this).removeClass('overcolor');  
  18.             }  
  19.         );  
  20.     }  
  21. })(jQuery);  

 

 

Java代码  js表格自动隔行变色
  1. //表格自动隔行变色，要变色的表格加上id属性  
  2. function stripeTables() {  
  3.     if (!document.getElementsByTagName) return false;  
  4.     var tables = document.getElementsByTagName("table");  
  5.     for (var i=0; i<tables.length; i++) {  
  6.         var odd = false;  
  7.         //alert(tables.length);  
  8.         if(tables[i].id){ //加id属性的显示  
  9.             var rows = tables[i].getElementsByTagName("tr");  
  10.             for (var j=0; j<rows.length; j++) {  
  11.                 //alert(rows.length);  
  12.                 if (odd == true) {  
  13.                     addClass(rows[j],"odd");  
  14.                     odd = false;  
  15.                 }else {  
  16.                     odd = true;  
  17.                 }     
  18.             }  
  19.         }  
  20.     }  
  21. }  
  22. //表格自动高亮显示光标所在行  
  23. function highlightRows() {  
  24.     if (!document.getElementsByTagName) return false;  
  25.     var tables = document.getElementsByTagName("table");  
  26.     for (var i=0; i<tables.length; i++) {  
  27.         if(tables[i].id){ //加id属性的显示  
  28.             var rows = tables[i].getElementsByTagName("tr");  
  29.             for (var j=0; j<rows.length; j++) {  
  30.                 rows[j].oldClassName = rows[j].className;  
  31.                 rows[j].onmouseover = function() {  
  32.                     addClass(this,"highlight");   
  33.                 }  
  34.                 rows[j].onmouseout = function() {  
  35.                     this.className = this.oldClassName;   
  36.                 }     
  37.             }  
  38.         }  
  39.     }  
  40. }  
  41.   
  42. addLoadEvent(stripeTables);  
  43. addLoadEvent(highlightRows);  
  44.   
  45. //点击tr后将tr所在的checkbox改变，  
  46. var old_row_bg;  
  47. var selected_row;  
  48. function selectRow(comp,setTo,value){      
  49.     if(selected_row!=null){  
  50.         selected_row.style.backgroundColor=old_row_bg;  
  51.     }  
  52.     selected_row=comp;  
  53.     old_row_bg=comp.style.backgroundColor;  
  54.     comp.style.backgroundColor="#FFFF55";  
  55.     document.getElementById(setTo).checked=!document.getElementById(setTo).checked;  
  56. }  
上一篇：十八.多个SLAM框架（A-LOAM、Lego-loam、LIO-SAM、livox-loam）室外测试效果粗略对比分析


下一篇：判断数据属于多个类别的技巧