借助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边框的颜色的更多相关文章

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

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

  2. JavaScript 节点操作Dom属性和方法(转)

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

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

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

  4. 在IE8中如何通过javascripts改变<style />中的内容？

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

  5. JavaScript中对象的属性

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

  6. javascript教程2:---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#中字段、属性、只读、构造函数赋值、反射赋值的相关

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

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

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

随机推荐

  1. 使用ViewPager切换Fragment时，防止频繁调用OnCreatView

    使用ViewPager切换Fragment,我原先使用系统自带的适配器FragmentPagerAdapter. 切换fragment时,频繁调用oncreatview(). 查看FragmentPa ...

  2. RunLoop 总结：RunLoop的应用场景（二）

    上一篇讲了使用RunLoop保证子线程的长时间存活,而不是执行完任务后就立刻销毁的应用场景.这一篇就讲述一下RunLoop如何保证NSTimer在视图滑动时,依然能正常运转. 参考资料 好的书籍都是值 ...

  3. Ubuntu搭建NFS

    NFS全称是Network File System,网络文件系统.它可以通过网络实现文件共享.其结构图大概是这样的: 在机器E上开启NFS服务,机器ABCD都挂载NFS,这样可以实现机器ABCD共享文 ...

  4. Oracle读取excel

    --解析excel,转换成table,可供查询,支持xls.xlsx --首先修改这个Type,长度改为4000. CREATE OR REPLACE TYPE XYG_PUB_DATA_UPLOAD ...

  5. 烂泥：切割nginx日志

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 这几天自己看了下博客的nginx日志,发现日志文件发现越来越大. 因为nginx自己不会 ...

  6. 【原】移动web资源整理

    2013年初接触移动端,简单做下总结,首先了解下移动web带来的问题 设备更新换代快——低端机遗留下问题.高端机带来新挑战 浏览器厂商不统一——兼容问题多 网络更复杂——弱网络,页面打开慢 低端机性能 ...

  7. SQLite3源程序分析之查询处理及优化

    前言 查询处理及优化是关系数据库得以流行的根本原因,也是关系数据库系统最核心的技术之一.SQLite的查询处理模块很精致,而且很容易移植到不支持SQL的存储引擎(Berkeley DB最新的版本已经将 ...

  8. asp.net获取服务器绝对路径和相对路径

    绝对路径 AppDomain.CurrentDomain.SetupInformation.ApplicationBase 相对路径 Server.MapPath("~/")表示当 ...

  9. java 过滤器

    1.什么是过滤器?  过滤信息,执行的优先级高于 servlet 2.自定义过滤器的步骤 写一个普通java类,实现Filter接口 2.配置过滤器  web.xm中 import java.io.I ...

  10. 用vue.js学习es6（二）：let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...