动态生成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.style.backgroundColor=(t.sectionRowIndex%2==0)?a:b;//t.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.onmouseover=function(){ if(this.x!="1")this.style.backgroundColor=c;}t.onmouseout=function(){ if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;} }}//行点击事件function clickRow(index){ rtOrder.id = tempArray["rtorderId"];//实时班次ID rtOrder.fullPrice = tempArray["fullPrice"];//全价票 rtOrder.halfPrice = tempArray["halfPrice"];//半价票 rtOrder.seat = tempArray["capacity"];//座位数 rtOrder.leftSeat = tempArray["seat"];//剩余座位数 var t=document.getElementById('newbody').getElementsByTagName("tr"); var radioId = "radio"+index; if(t.x!="1"){ //选中标识 t.x="1"; t.style.backgroundColor='#bce774'; } //选中色 t.style.backgroundColor='#bce774'; if(lastCheckRadioId!=null && lastCheckRadioId!="" && lastCheckRadioId!=radioId){ var lastIndex = lastCheckRadioId.split("o"); //还原上次选中行的颜色 t.style.backgroundColor=(t.sectionRowIndex%2==0)?'#f8fbfc':'#e5f1f4'; //未选择标识 t.x="0"; } /**兼容IE7 * 在IE7下使用document.getElementById(lastCheckRadioId)取不到值，为了保证radio标签只选中一条数据 * 在IE8下不用写此代码。 **/ var radios = getElementsByName_iefix("rtorderGrid","input","type","radio"); radios[(lastCheckRadioId.split("o"))].checked = false; /***********************************************/ lastCheckRadioId = radioId; //选中行的时候同时选中单选按钮 document.getElementById(radioId).checked = true; document.getElementById(radioId).focus(); showMoney(""); }
页:
[1]