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]);


 

 

 

目录
相关文章
|
2月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
14 2
|
22天前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
14 0
|
2月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
2月前
|
JavaScript
jQuery 事件
jQuery 事件
37 10
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
19 3
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1
|
2月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
33 3
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
26 5
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
14 1