`
zhangljerry
  • 浏览: 140519 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Javascript变换表格内容

阅读更多
[code<script language="javascript">
// JavaScript Document
var colorArray = new Array;
colorArray[0] = "#0066ff"
colorArray[1] = "#105409"
colorArray[2] = "#9a0000"
colorArray[3] = "#9f6b39"
colorArray[4] = "#ffab25"
colorArray[5] = "#7665e9"
function chh(){
var obj = window.event.srcElement;
   if (obj.tagName != "TD"){
      return;
   }
   index = obj.cellIndex;
    var J = obj.id
   if (J == index){
       return;
   }
   for (var i=0; i<it.cells.length;i++){
         it.cells[i].style.background = colorArray[i]+" url(images/menu.gif)";
         it.cells[i].className = "jjk";
         it.cells[i].id = index;
    }
    obj.className = "jk";
    obj.style.background =colorArray[index]
   
  for ( i=0; i<content.tBodies.length;i++){
      content.tBodies[i].style.display = "none"
   }
   content.tBodies[index].style.display = "block"
   content.tBodies[index].style.background=colorArray[index]
   banner.innerHTML = "<img src=images/"+(index+1)+".jpg width=740 height=190>"
}
function onload(){
     for (i=0; i<it.cells.length; i++){
          it.cells[i].style.background = "#ccc url(images/menu.gif)";
         }
    it.cells[0].style.background =colorArray[0];
    it.cells[0].style.borderLeft = "1px solid #ffffff"
    }
</script>

<body onLoad="onload();" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="740" height="190" id="banner" ><img src="images/1.jpg" width="740" height="190"></td>
  </tr>
  <tr align="left">
    <td>
<TABLE style="COLOR: white" cellSpacing=0 cellPadding=0 width=740 border=0>
  <TBODY>
  <TR id=it onmouseover=chh() >
    <TD class=jk id=ABCEDFGHIJKLMNOPQRSTUVWXYZ width=123 height=41> » <A href="#">测试一</A> </TD>
    <TD class=jjk width=123 height=41> » <A href="#">测试二</A></TD>
    <TD class=jjk width=123 height=41> » <A href="#">测试三</A> </TD>
    <TD class=jjk width=123 height=41> » <A href="#">测试四</A> </TD>
    <TD class=jjk width=123 height=41> » <A href="">测试五</A> </TD>
    </TR>
  </TBODY>
  </TABLE>
    </td>
  </tr>
  <tr>
    <td><TABLE id=content cellSpacing=0 cellPadding=0 width=740>
      <TBODY style="DISPLAY: block">
        <TR bgColor=#0066ff>
          <TD class=tbody style="HEIGHT: 80px" width=738></TD>
        </TR>
      </TBODY>
      <TBODY style="DISPLAY: none">
        <TR bgColor=#105409>
          <TD class=tbody style="HEIGHT: 80px">   </TD>
        </TR>
      </TBODY>
      <TBODY style="DISPLAY: none">
        <TR bgColor=#9a0000>
          <TD class=tbody style="HEIGHT: 80px"> </TD>
        </TR>
      </TBODY>
      <TBODY style="DISPLAY: none">
        <TR bgColor=#9f6b39>
          <TD class=tbody vAlign=top align=left></TD>
        </TR>
      </TBODY>
      <TBODY style="DISPLAY: none">
        <TR bgColor=#ffab25>
          <TD class=tbody vAlign=top> </TD>
        </TR>
      </TBODY>
      <TBODY style="DISPLAY: none">
      </TBODY>
    </TABLE>
    </td>
  </tr>
</table>

分享到:
评论

相关推荐

    JavaScript变换表格边框颜色

    JavaScript变换表格边框颜色! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    javascript经典特效---变换的立体感表格.rar

    变换的立体感表格.rar变换的立体感表格.rar

    JavaScript实现自动变换表格边框颜色

    &lt;... ...表格边框变换颜色代码&lt;/title&gt; &lt;/head&gt; &lt;body&gt; 等待,然后注意看边框是不是变色了? [removed] &lt;!-- function hovertreecolor(){ if (change_jb51_net.style.bor

    JavaScript实现表格快速变色效果代码

    主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下

    响应鼠标变换表格背景或者颜色的代码

    响应鼠标变换表格背景或者颜色的代码

    程序天下:JavaScript实例自学手册

    9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果(一) 9.38 类C# GridView的编辑效果(二) 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选...

    JavaScript详解(第2版)

     12.6.1 变换图片位置   12.6.2 改变图片的高度和宽度属性   12.7 应知应会   练习   第13章 事件处理   13.1 事件处理函数介绍   13.2 事件处理的内联模型   13.2.1 HTML和事件处理函数   ...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    JavaScript实例精通

    示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4.htm 锁定表格的表头。 15_5.htm 简单的表格排序。 15_6.htm 表格翻页...

    《JavaScript实例精通》[源代码]

    示例描述:JavaScript操作表格和DOM。 15_1.htm 动态添加表格。 15_2.htm 获取表格的某行。 15_3.htm 获取某个表格的单元格。 15_4.htm 锁定表格的表头。 15_5.htm 简单的表格排序。 15_6.htm 表格翻页...

    随着下拉框的改变 下拉框的值也在同步变化

    js实现通过改变下拉框的值,输出相应的下拉框的value

    JavaScript完全自学宝典 源代码

    1.4.html 使用JavaScript对网页中的内容进行验证。 1.5.html HMTL中调用.js文件。 1.6.html 使用“”标记,实现的滚动字幕效果。 1.7.html 使用JavaScript实现简单的字幕滚动。 1.8.html 使用...

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本使用 152 6.3 CSS选择器 158 6.4...

    精通JavaScript+jQuery Part1

     9.7 翻转变换(Flip)   9.8 光晕(Glow)   9.9 灰度(Gray)   9.10 反色(Invert)   9.11 遮罩(Mask)   9.12 阴影(Shadow)   9.13 X射线(X-ray)   9.14 浮雕纹理(Emboss和...

    javascript网页特效实例大全

    10.5 渐变色表格 269 10.6 列表内容相互转换 270 10.7 身体健康测试 273 10.8 网络知识测试 275 10.9 方框线上的闪耀效果 278 10.10 自动隐藏的菜单 281 10.11 自动收缩的菜单 283 10.12 爆炸式菜单链接 285 ...

    dartsheet:带有Dart和JavaScript的基于Excel的电子表格

    带有RxJs的Dart电子表格 这是用Dart编写的电子表格组件。 所有电子表格实体(单元格,行,列,单击事件)都...您可以通过拖动同一选择的右下角的绿色实心小矩形来变换和克隆选择的单元格行为 编写公式 公式需要使用

Global site tag (gtag.js) - Google Analytics