首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

动态生成table(带隔行换色,鼠标透过颜色,选中行颜色)

2012-11-22 
动态生成table(带隔行换色,鼠标经过颜色,选中行颜色)//查询用的AJAX提交请求SellTicketPage.doAjaxAction

动态生成table(带隔行换色,鼠标经过颜色,选中行颜色)

//查询用的AJAX提交请求SellTicketPage.doAjaxAction = function(sURL) {new Ajax.Request(sURL, {method : "post",onSuccess : doAction,onFailure : errorAction});}//查询的回调函数function doAction(Re) {    //返回的串var str = Re.responseText.evalJSON(); //构造画表格的二维数组var tem = str.StrListContext.evalJSON();   //StrListContext为返回的LIST的JSON串的名字tempArray = tem;//先清空表格$("newbody").innerText = '';//没查询出结果if(tem.length ==0){document.getElementById("rideDate").focus();return;}//把ID放到数组中,跟隐藏域一样的效果var rowNum=0;tem.each(function(alpha){        var row=document.createElement("tr");   row.id=rowNum;   row.onclick= function(){clickRow(this.id);};        //单选按钮var cell = document.createElement("td"); //   cell.id = rowNum+''+0;     var radio = document.createElement("input");      radio.type = 'radio';     radio.name = 'rtOrderIds';     radio.id = 'radio'+rowNum;     radio.onclick= function(){clickCell(this.id);};    cell.appendChild(radio);    row.appendChild(cell);   for(var j=1;j<12;j++){   var cell = document.createElement("td");    cell.id = rowNum+''+j; switch (j) {//switch开始实现判断过程 case 1:  cell.appendChild(document.createTextNode(alpha.rtorderCode));  break; case 2:     cell.appendChild(document.createTextNode(alpha.pleaveDt));  break; case 3:     cell.appendChild(document.createTextNode(alpha.stationName));  break; case 4:     cell.appendChild(document.createTextNode(alpha.baseCodeName));  break; case 5:     cell.appendChild(document.createTextNode(alpha.bcRoadtype));  break; case 6:     cell.appendChild(document.createTextNode(alpha.capacity));  break; case 7:     cell.appendChild(document.createTextNode(alpha.seat));  break; case 8:     cell.appendChild(document.createTextNode(alpha.fullPrice));  break; case 9:     cell.appendChild(document.createTextNode(alpha.halfPrice));  break; case 10:     cell.appendChild(document.createTextNode(alpha.lineName));  break; case 11:     cell.appendChild(document.createTextNode(alpha.arrivePeriod));  break; }   row.appendChild (cell);   }rowNum++;$("newbody").appendChild (row);     });    //senfe("表格名称","奇数行背景","偶数行背景","鼠标经过背景","点击后背景");    senfe("newbody","#f8fbfc","#e5f1f4","#ecfbd4","#bce774");         //默认选中第一行    document.getElementById("radio0").checked = true;    document.getElementById("radio0").focus();    lastCheckRadioId = 'radio0';    clickRow(0);}function senfe(o,a,b,c,d){ var t=document.getElementById(o).getElementsByTagName("tr"); for(var i=0;i<t.length;i++){  t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;//  t[i].onclick=function(){//   if(this.x!="1"){//    this.x="1";//    this.style.backgroundColor=d;//   }else{//    this.x="0";//    this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;//   }//  }  t[i].onmouseover=function(){   if(this.x!="1")this.style.backgroundColor=c;  }  t[i].onmouseout=function(){   if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;  } }}
//行点击事件function clickRow(index){?rtOrder.id = tempArray[index]["rtorderId"];//实时班次ID?rtOrder.fullPrice = tempArray[index]["fullPrice"];//全价票?rtOrder.halfPrice = tempArray[index]["halfPrice"];//半价票?rtOrder.seat = tempArray[index]["capacity"];//座位数?rtOrder.leftSeat = tempArray[index]["seat"];//剩余座位数
??var t=document.getElementById('newbody').getElementsByTagName("tr");?var radioId = "radio"+index;????? if(t[index].x!="1"){???? ? //选中标识?????? t[index].x="1";?????? t[index].style.backgroundColor='#bce774';???? }???//选中色????? t[index].style.backgroundColor='#bce774';????? if(lastCheckRadioId!=null && lastCheckRadioId!="" && lastCheckRadioId!=radioId){????? ? var lastIndex = lastCheckRadioId.split("o")[1];??????? //还原上次选中行的颜色????t[lastIndex].style.backgroundColor=(t[lastIndex].sectionRowIndex%2==0)?'#f8fbfc':'#e5f1f4';????//未选择标识????t[lastIndex].x="0";????? }?? /**兼容IE7?? * 在IE7下使用document.getElementById(lastCheckRadioId)取不到值,为了保证radio标签只选中一条数据?? * 在IE8下不用写此代码。?? **/?? var radios = getElementsByName_iefix("rtorderGrid","input","type","radio");?? radios[(lastCheckRadioId.split("o")[1])].checked = false;???? /***********************************************/???? ???? lastCheckRadioId = radioId;?//选中行的时候同时选中单选按钮?document.getElementById(radioId).checked = true;?document.getElementById(radioId).focus();?showMoney("");??}

?

热点排行