jQuery操作表格背景色迭代和鼠标移动事件(CSS中使用expression)

简介: 表格的操作: 1:通过树形迭代,获取要操作的表格节点,jQuery实现动态的table背景色迭代,和鼠标移动时间,js实现(使用于一层表格,js方法参数为表格id,颜色自定义): 表格css代码: #userinfoshow tr th{background: #B15BFF; text-align:center;vertical-align:middle;}//表头背景色和上下左

表格的操作:

1:通过树形迭代,获取要操作的表格节点,jQuery实现动态的table背景色迭代,和鼠标移动时间,js实现(使用于一层表格,js方法参数为表格id,颜色自定义):

表格css代码:

	#userinfoshow tr th{background: #B15BFF; text-align:center;vertical-align:middle;}//表头背景色和上下左右居中                        
	#userinfoshow tr td{text-align:center;vertical-align:middle;}	//内容td上下左右居中

js代码如下(部分省略): 

//表头代码  
var  tHeaderMsg = "<table id='userinfoshow' width='650px' border='1px' cellspacing='0px'>" +
		"<tr bgcolor='#B15BFF'><th>No.</th><th>姓名</th><th>省/市/区</th><th>州/市/盟</th><th>县/旗/区/镇</th>" +
		"<th>电话</th><th>出生年月</th></th><th>年龄</th></th></th><th>性别</th>" +
		"</th><th>性格</th></th><th>学历</th>" +
		"</tr>";
  //页面数据内容获取                                                                                                               
  var name = $("#name").val();
  var ename = $("#ename").val();
  var phone = $("#phone").val();
  var idcard = $("#idcard").val();
  var character = $("#character").find("option:selected").text();   //获取select下拉框的值                                        
  //var character1 = $("#character").find("option:selected").val();  //等等,页面数据获取,部分省区
 //页面数据动态加载到表格td中                                                                                                            
 userMsg = userMsg + "<tr><td>"+i+"</td><td>"+name+"</td><td>"+province+"</td><td>"+state+"</td><td>"+county+"</td>" +
   "<td>"+phone+"</td><td>"+birthdayYear+"-"+birthdayMonth+"-"+birthdayDay+"</td><td>"+agex+"</td><td>"+genderView+"</td>" +
     "<td>"+character+"</td><td>"+highestDegree+"</td></tr>";//此处,做了循环,以展现效果                                                
     var tFooterMsg="</table>";  
//最终将表格信息显示id="showtableinfo"的div中                                                                                             
var tBodyMsg = tHeaderMsg + userMsg + tFooterMsg;                                                                         
$("#showtableinfo").html(psgMsgTable);
//jQuery实现table的背景色迭代和鼠标事件/**
 * set Table Background Color
 * i=1: th=0
 * */ 
function setTableBgColor(tableId){
	var tableStr = "";
	tableStr = "#"+tableId+" tr";
	var tableTrObj = $(tableStr);
	for(var i=1;i<tableTrObj.length;i++){
		tableTrObj[i].backgroundColor = tableTrObj[i].style.backgroundColor = (i&1)?"#FCFCFC":"#E0E0E0";
		tableTrObj[i].onmouseover = function(){this.style.backgroundColor = "#FF77FF";}       
		tableTrObj[i].onmouseout = function(){this.style.backgroundColor = this.backgroundColor;}
	}
}

表格最终效果图:

jQuery实现,按钮图片的切换:

$("#kkimgbutton").mouseover(function(){$("#kkimgbutton").attr("src","images/tn2.jpg");});      
$("#kkimgbutton").mouseout(function(){$("#kkimgbutton").attr("src","images/tn1.jpg");});                                        

IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javascript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。
这个表达式就好像是在这个元素的一个成员函数中一样。 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用,从IE5开始得到支持,后因标准、性能、安全性等问题,微软从IE8 beta2标准模式开始,取消对css expression的支持

eg:

background:expression((this.parentNode.rowIndex)%2==0?"#3DB7CC":"#B3F4FF");
或background-color:expression('red,blue'.split(',')[rowIndex%2]);


 

 

 

目录
相关文章
|
1天前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
33 21
|
4天前
|
JavaScript
jQuery和CSS3精美翻页式电子时钟特效
jQuery和CSS3精美翻页式电子时钟特效
|
5天前
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
53 12
|
26天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
22 1
|
23天前
|
JavaScript 前端开发
jQuery和CSS3带变形特效的固定导航菜单
这是一款jQuery和CSS3带变形特效的固定导航菜单。该导航菜单开始时固定在页面左上角,当用户向下滚动时,导航菜单以水滴变形的方式转换为圆形菜单,然后固定在页面的左上角位置。
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
22 0
|
3月前
|
JavaScript
jQuery 事件
jQuery 事件
40 10
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
16 0