当前位置: 代码迷 >> Web前端 >> 动态生成table(带隔行换色,鼠标透过颜色,选中行颜色)
  详细解决方案

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

热度:127   发布时间:2012-11-22 00:16:41.0
动态生成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("");
??
}

?

  相关解决方案