`
asgab
  • 浏览: 43690 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

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

 

分享到:
评论

相关推荐

    jquery隔行换色和鼠标经过样式

    在网页设计中,为了提升用户体验和视觉效果,我们经常需要对表格或者列表数据进行隔行换色处理,同时实现鼠标经过时的样式变化。jQuery,一个广泛使用的JavaScript库,提供了便利的方法来实现这些功能。本篇文章将...

    表格渲染(悬浮变色,隔行换色,点击变色)

    /** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

    layui的表格table选中数据后更改本行的颜色

    在实际应用中,我们经常需要根据用户的选择状态来改变表格的视觉效果,比如选中某行后改变其颜色,以突出显示。下面将详细介绍如何在layui的表格中实现这一功能,并涉及到相关的JavaScript和CSS知识。 首先,layui...

    表格table隔行换色以及点击整行变色.rar

    本教程将详细讲解如何实现表格的隔行换色以及点击整行变色的效果,这两种技术可以提升用户体验,使表格内容更加清晰易读。 首先,让我们讨论表格隔行换色。这种效果通常被称为“斑马线”效果,因为它使得交替的行...

    codeAjax选项卡、隔行换色、弹出层

    在IT领域,网页开发是不可或缺的一部分,而"codeAjax选项卡、隔行换色、弹出层"这三个概念都是网页动态交互设计中的重要元素。让我们分别深入探讨它们的原理和应用。 首先,codeAjax选项卡是一种常见的用户界面设计...

    隔行换色和鼠标经过样式和title提示效果代码

    在网页设计中,隔行换色、鼠标经过样式和title提示效果是常见的增强用户体验的技巧。这些技术可以提升用户在浏览表格或者列表时的可读性和互动性。下面将详细阐述这些知识点,并给出相应的实现方法。 一、隔行换色 ...

    jquery 实现隔行换色

    这种方法的一个优点是,即使表格动态添加或删除行,由于我们是基于行索引来应用样式,所以仍然可以保持隔行换色的效果。然而,需要注意的是,如果表格有服务器端分页,每页的行数可能不一致,这可能导致颜色分布不...

    jquery 隔行换色

    在网页设计中,隔行换色是一种常见的视觉增强技巧,用于提高表格或列表的可读性。`jQuery`,作为一款强大的JavaScript库,为开发者提供了便捷的方法来实现这样的效果。本教程将详细介绍如何使用`jQuery`实现隔行换色...

    隔行颜色不同、隔行颜色不同

    在网页设计中,隔行颜色不同的效果通常是为了增强表格或者列表的可读性,使得用户在浏览长列表时能更容易区分每一行的信息。这个效果主要通过CSS(层叠样式表)来实现,同时结合jQuery(一种JavaScript库)进行动态...

    jquery实现表格隔行换色和鼠标经过提示效果源码

    本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先,我们需要理解jQuery的基本用法。jQuery通过选择器(如`$("#id")`、`$(".class")`或`$("tag")`)找到页面中的元素,然后对这些...

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    本篇将详细探讨如何利用jQuery实现表格中checkbox的相关事件操作,包括动态添加行、隔行换色、选中变色、全选与反选等功能。 首先,让我们了解jQuery的基本概念。jQuery是一个快速、简洁的JavaScript库,它简化了...

    table 隔行换色

    table 隔行换色,这是我自己做的一个东西,感觉还行,不过不能运行的,需要自己再处理下就行了,但是关键代码都在了

    JavaScript隔行换色

    4. **事件监听**:考虑到动态数据或用户交互,可能需要在表格更新后重新应用这个隔行换色的逻辑。可以监听表格的`DOMSubtreeModified`事件,以确保颜色始终保持正确。 ```javascript table.addEventListener('...

    jquery实现隔行换色特效代码.zip

    在网页设计中,为了提升用户体验和视觉效果,经常会使用到一些动态特效,其中“隔行换色”是一种常见的表格美化技巧。本知识点主要讲解如何利用jQuery库来实现这个功能。 jQuery是一个广泛使用的JavaScript库,它...

    一天搞定jQuery(二)——使用jQuery表格的隔行换色

    隔行换色通常是为了增强表格的可读性,使偶数行和奇数行具有不同的背景颜色。 接下来,我们将学习如何使用jQuery来实现这一效果。首先,确保在你的HTML文件中引入jQuery库。你可以通过以下代码从CDN获取最新版本的...

    隔行换色.rar隔行换色.rar

    为了解决这个问题,可以采用隔行换色的技巧,即奇数行和偶数行使用不同的背景颜色,使得相邻行之间产生对比,从而降低闪烁感。 在描述中多次重复“隔行换色.rar”,这可能暗示着压缩包内包含的资源是关于如何实现或...

    实现表格隔行换色效果.rar

    在网页设计中,隔行换色的表格效果是一种常见的视觉优化手段,它能帮助用户更清晰地识别和区分表格中的数据。本示例"实现表格隔行换色效果"主要涉及JavaScript(JS)编程和HTML表格元素的使用,旨在通过JS特效提升...

    隔行换色效果

    var table=document.getElementById("table"); var trs=table.getElementsByTagName("tr"); var i; var color1='#FFFFFF'; var color2='#F8F8F8'; for(i=1;i;i++){ if(i%2==0){ trs[i].className='two'; }...

    基于Jquery的表格隔行换色,移动换色,点击换色插件

    标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能,包括隔行换色、移动换色以及点击换色。首先,我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...

    jQuery实现table表格鼠标经过隔行换颜色特效代码.zip

    "jQuery实现table表格鼠标经过隔行换颜色特效代码"是一个实用的例子,展示了如何利用jQuery为HTML表格添加交互性,使得用户在鼠标悬停在表格行上时,能动态改变行的背景色,提高用户体验。 首先,我们需要了解HTML...

Global site tag (gtag.js) - Google Analytics