DHTML动态增加行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 
<head>
  
<title></title>
  
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
  
<meta name="ProgId" content="VisualStudio.HTML">
  
<meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
  
<script id="clientEventHandlersJS" language="javascript">
        
<!--
   
function CreateRows_onclick()
   
//动态增加行
       //增加一行
    var AppendRow = Orders.insertRow(Orders.rows.length);
    
    
var TotalRows = Orders.rows;
    
    
var Cells= AppendRow.cells;
    
//增加三列
    var AppendCell1= TotalRows(AppendRow.rowIndex).insertCell(Cells.length);
    
    
var AppendCell2= TotalRows(AppendRow.rowIndex).insertCell(Cells.length);
    
    
var AppendCell3= TotalRows(AppendRow.rowIndex).insertCell(Cells.length);     
       AppendCell1.innerHTML
="<B>1</B>";
      
       AppendCell2.innerHTML
="<B>2</B>";
      
       AppendCell3.innerHTML
="<B>3</B>";
      
    AppendRow.id
=Orders.rows.length;
    
    AppendCell1.id
=(AppendRow.id)*10+1;
    
    AppendCell2.id
=(AppendRow.id)*10+2;
    
    AppendCell3.id
=(AppendRow.id)*10+3;
    
//为新建行注册onmouseover事件被触发时调用的函数     
    AppendRow.onmouseover = changeBackgroudColor;
    
    AppendRow.onmouseout 
=changeOriginalColor;
   }
 
   
     
      
function changeBackgroudColor()
      
{//鼠标进入该行时改变颜色
        var id  = event.srcElement.id;
       
        
var floatId   = id/10;
       
        
var rownunber = Math.floor(floatId);
       
        
if (rownunber%2 == 1
        
{   //单行时为红色
       
          
if(event.srcElement.tagName=="TD")
          
{  
            event.srcElement.parentElement.style.backgroundColor 
= "#ff3300";
          }

          
else
          
{
            event.srcElement.style.backgroundColor 
= "#ff3300";
          }

         
        }

        
else
        
{  //双数行时为兰色
       
         
if(event.srcElement.tagName=="TD")
          
{  
            event.srcElement.parentElement.style.backgroundColor 
= "#0033cc";
          }

          
else
          
{
            event.srcElement.style.backgroundColor 
= "#0033cc";
          }
        
        }
     
       
      }

     
      
function changeOriginalColor()
      
{   //鼠标离开该行时恢复颜色
         if(event.srcElement.tagName=="TD")
          
{  
            event.srcElement.parentElement.style.backgroundColor 
= "#ffcc00";
          }

          
else
          
{
            event.srcElement.style.backgroundColor 
="#ffcc00";
          }

     }

     
        
//-->
  
</script>
 
</head>
 
<body>
  
<FONT face="宋体"><INPUT id="CreateRows" type="button" value="CreateRows" name="CreateRows" onclick="return CreateRows_onclick()">
   
<TABLE id="Orders" cellSpacing="1" cellPadding="1" width="300" border="1" bgcolor="#ffcc00">
    
<TR id="1" onmouseover="changeBackgroudColor()" onmouseout="changeOriginalColor()">
     
<TD id="11">aa</TD>
     
<TD id="12">bb</TD>
     
<TD id="13">cc</TD>
    
</TR>    
   
</TABLE>
  
</FONT>
 
</body>
</html>
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值