`
zhangljerry
  • 浏览: 143528 次
  • 性别: 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/

    表格编辑css美化及javascript

    HTML5还支持`contenteditable`属性,使得用户可以直接在浏览器中编辑表格内容,无需额外的编辑器工具。 CSS(层叠样式表)则是负责网页样式的语言,用于定义元素的外观、布局和结构。在美化表格时,我们可以利用CSS...

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

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

    响应鼠标变换表格背景或者颜色.rar

    "响应鼠标变换表格背景或者颜色"是一个典型的JS特效应用,它涉及到了HTML表格、CSS样式以及JavaScript事件处理。下面将详细阐述这个主题的知识点。 首先,HTML表格是网页数据展示的主要工具,由`&lt;table&gt;`、`&lt;tr&gt;`...

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

    其次,让我们来看一下使用JavaScript变换背景颜色的代码: ;" onMouseOver="this.bgColor='#E0E0E0';"&gt; 在上面的代码中,我们使用了 HTML 的 tr 元素,并为其添加了 onMouseOver 和 onMouseOut 事件处理函数。当...

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

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

    变换的表格效果.rar

    4. **动态表格**:动态表格可以根据用户输入或系统事件实时更新内容。例如,通过AJAX技术,表格可以异步加载新数据,或者根据用户的选择显示或隐藏特定行或列。 5. **图表转换**:有时,表格数据更适合用图表展示,...

    table表格内容上下移动的三种实现方法

    用户触发上移或下移操作后,前端发送Ajax请求到服务器,服务器根据请求改变数据的顺序,然后再返回更新后的数据,前端刷新表格内容。这种方法适用于需要持久化数据顺序的场景,如数据库存储的表格数据。需要掌握的...

    css 单击表格变换颜色

    在本主题“css 单击表格变换颜色”中,我们将深入探讨如何使用CSS来实现用户在点击表格单元格时改变其背景颜色的效果,为用户提供更好的交互体验。 首先,我们需要了解HTML表格的基本结构。一个简单的HTML表格由`...

    javascript背景颜色按时变换.docx

    文档中还提到了一些相关的JavaScript代码示例,例如使用JavaScript实现表格行的背景颜色交替、li列表的数据隔行变色、响应鼠标事件改变表格或元素颜色、背景云的动态效果、鼠标移动时背景云的变化,以及使用Jquery...

    单击表格变换颜色.rar

    总的来说,"单击表格变换颜色"这一功能涉及到了HTML基础、CSS样式设计以及JavaScript事件处理,是前端开发中常见的交互实现。了解并掌握这些技能对于一个IT从业者来说至关重要,尤其是在网页和UI设计方面。通过不断...

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

    总结来说,通过上述内容的学习,我们了解了如何使用JavaScript实现表格快速变色效果,核心知识点包括JavaScript数组操作、定时器使用以及可能涉及的安全隐患。希望上述内容能够对大家在JavaScript程序设计方面提供...

    javascript经典特效---TD背景的变换.rar

    在网页设计中,JavaScript常被用来实现各种各样的视觉特效,包括我们今天要讨论的主题——TD(表格单元格)背景的变换。 在HTML中,表格(Table)是组织数据的一种常见方式,而TD则是表格中的基本元素。通过...

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

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

    用JS控制表格的交替颜色.rar

    为了解决这一问题,我们可以使用JavaScript(JS)来实现表格行的交替颜色,提高用户的阅读体验。本教程将深入讲解如何用JS控制表格的交替颜色,使其呈现出更美观的视觉效果。 首先,我们需要理解HTML表格的基本结构...

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

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

    网页动态改变表格大小

    此外,需要通过相对定位(`position: relative`)和绝对定位(`position: absolute`)确保手柄不会影响表格内容。 3. **JavaScript 交互**: 使用JavaScript库,如提供的`mylisttable.js`和`mycommon.js`,可以...

    The Art&Science of JavaScript.pdf

    - **JavaScript动态表格操作**:讨论如何利用JavaScript动态地创建、修改和更新表格数据。 - **表格的数据处理**:包括表格数据的排序、过滤等实用技巧。 #### 章节二:客户端徽章的创建(Creating Client-side ...

    JavaScript完全自学宝典 源代码

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

Global site tag (gtag.js) - Google Analytics