动态生成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.οnclick= 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.οnclick= 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
//行点击事件
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("");
  
}

 

你可能感兴趣的:(javaScript)