表格的操作:
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]);