动态生成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("");??}
?