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月前
jQuery+CSS3自动轮播焦点图特效源码
jQuery+CSS3自动轮播焦点图特效源码
17 1
jQuery+CSS3自动轮播焦点图特效源码
|
1月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
前端开发 JavaScript
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
如何固定html表格头部,用css样式即可实现,操作简便、代码简单
28 0
|
4月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
28 0
|
1月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
17 0
|
1月前
|
前端开发
编程笔记 html5&css&js 016 HTML表格
编程笔记 html5&css&js 016 HTML表格
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
24 0
|
3月前
|
前端开发
使用CSS实现网格+渐变背景色的Web页面背景
使用CSS实现网格+渐变背景色的Web页面背景
28 0
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
17 0
|
3月前
|
移动开发 前端开发 小程序
CSS 如何完美地去除表格的 “双线”
CSS 如何完美地去除表格的 “双线”