借助JavaScript中的Dom属性改变Html中Table边框的颜色

时间：2021-10-27 23:34:37

借助JavaScript中的Dom属性改变Html中Table边框的颜色

--------------------

<html>
<head>
<title>我是页面标题卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript">
    function over(id){
        var tableObj = document.getElementById("table1");
        for(var i=0;i<tableObj.rows;i++){
            alert(tableObj.rows[i].cells[0].innerHTML);
        }
        document.getElementById(id).style.borderLeftColor="green";
        document.getElementById(id).style.borderRightColor="green";
        document.getElementById(id).style.borderTopColor="green";
        document.getElementById(id).style.borderBottomColor="green";
    }
    function out(id){
        document.getElementById(id).style.borderLeftColor="pink";
        document.getElementById(id).style.borderRightColor="pink";
        document.getElementById(id).style.borderTopColor="pink";
        document.getElementById(id).style.borderBottomColor="pink";
    }
</script>
</head>
<body>
<table id="table1"  width="200" border="1px" bordercolor="pink">
  <tr>
    <td width="60" id="Ttd0" onmouseover="over('Ttd0')" onmouseout="out('Ttd0')">&nbsp;</td>
    <td width="58" id="Ttd1" onmouseover="over('Ttd1')" onmouseout="out('Ttd1')">箱数</td>
    <td width="66" id="Ttd2">单价</td>
  </tr>
  <tr>
    <td id="Ttd3">苹果</td>
    <td id="Ttd4">50</td>
    <td id="Ttd5">30</td>
  </tr>
  <tr>
    <td id="Ttd6">香蕉</td>
    <td id="Ttd7">60</td>
    <td id="Ttd8">35</td>
  </tr>
</table>
</body>
</html>

借助JavaScript中的Dom属性改变Html中Table边框的颜色

-----------------------------------

借助JavaScript中的Dom属性改变Html中Table边框的颜色的更多相关文章

  1. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

  2. JavaScript 节点操作Dom属性和方法&lpar;转&rpar;

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  3. 整理悬浮在列表中a元素时改变a元素上下边框颜色的问题。

    整理一下当悬浮在a元素上时a的上下边颜色改变,并且里面的内容不会移动,下面是PSD图效果区域: 刚开始我先给A元素加了上下边框和颜色,利用a:hover改变a元素上下的边框颜色,但是第一个a元素的下边 ...

  4. 在IE8中如何通过javascripts改变&lt&semi;style &sol;&gt&semi;中的内容？

    1.createStyleSheet() if(document.createStyleSheet){  var cssStyle=document.createStyleSheet();  //兼容 ...

  5. JavaScript中对象的属性

    在JavaScript中,属性决定了一个对象的状态,本文详细的研究了它们是如何工作的. 属性类型 JavaScript中有三种不同类型的属性:命名数据属性(named data properties) ...

  6. javascript教程2&colon;---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  7. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  8. C&num;中字段、属性、只读、构造函数赋值、反射赋值的相关

    C#中字段.属性和构造函数赋值的问题 提出问题 首先提出几个问题: 1.如何实现自己的注入框架? 2.字段和自动属性的区别是什么? 3.字段和自动属性声明时的直接赋值和构造函数赋值有什么区别? 4.为 ...

  9. css盒子模型中的border属性

        认识border属性 我们可以通过boder属性来为元素设置边框:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线.CSS border 属性允许你规定元素边框的样式.宽度和 ...

随机推荐

  1. Spark2&period;0自定义累加器

    Spark2.0 自定义累加器 在2.0中使用自定义累加器需要继承AccumulatorV2这个抽象类,同时必须对以下6个方法进行实现: 1.reset 方法: 将累加器进行重置; abstract  ...

  2. 【OpenGL】法线变换详解（Normal Transform）&lbrack;转&rsqb;

    http://blog.csdn.net/xiajun07061225/article/details/7762711 在图形学中,同样的一个模型视图变换矩阵可以用来变换点.线.多边形以及其它几何体, ...

  3. 浅议tomcat与classloader

    关于tomcat和classloader的文章,网上多如牛毛,且互相转载,所以大多数搜到的基本上是讲到了tomcat中classloader的几个层次,对于初接触classloader,看了之后还是只 ...

  4. Gen&lowbar;fsm行为实践与分析

    1.简介 Gen_fsm是一个通用的有限状态机,它描述了这样的一组关系: State(S) x Event(E) -> Actions(A),State(S') 这个关系意味着:如果在S状态下发 ...

  5. MySQL&lpar;5&period;6&rpar; 函数

    字符串函数 ASCII(str) 说明:返回字符串 str 最左边字符的 ASCII 值 mysql'); mysql); mysql> SELECT ASCII('a'); mysql> ...

  6. FAQ&colon;Python 断点调试

    Python程序调试:断点调试是必须有的功能,以Pycharm开发工具为例: 一.理论知识: 1. step into(F7)就是单步执行,遇到子函数就进入并且继续单步执行: 2  step over ...

  7. 图片浏览 h5

    @{ Layout = null; } <html> <head> <script type="text/javascript" src=" ...

  8. 邓&lowbar; phpcms&lowbar;

    {pc:content action="lists" catid="$catid" num="10" order="id DESC ...

  9. Pygame常用方法

    '''import pygame# 初始化pygame库,让计算机硬件准备pygame.init()# ----------窗口相关操作-----------# 创建窗口window = pygame ...

  10. Chrome Inspect调试微信出现空白页面的解决方法

    首先,需要打开手机的USB调试和微信的TBS 调试开关. 如果不打开TBS开关,Inspect时会检测不到任何微信的H5页面 使用微信扫码下方二维码,打开TBS调试开关: 普通网页: 小程序: 微信扫 ...

相关文章