dom （委托应用1）

最新推荐文章于 2023-12-25 01:50:07 发布
最新推荐文章于 2023-12-25 01:50:07 发布
阅读量100 收藏
点赞数
分类专栏： 客户端js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45827064/article/details/106164499
版权

表格变色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
            <tr>
                <td>003526</td>
                <td>农银金穗3个月定期开放债券</td>
                <td>1.075</td>
                <td>1.079</td>
                <td>1.074</td>
                <td>+0.047%</td>
            </tr>
        </tbody>
    </table>
    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>
qq_45827064
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript-鼠标移动到哪行哪行变色
曹学成的博客
07-11 868
前几天，看晓鸿的博客有一个类似的博客。今天也学习了一下。HTML：6行4列&lt;body&gt; &lt;table border="1" id="tbl"&gt; &lt;tr&gt; &lt;td&gt; 11111111 &lt;/td&gt; &
轻量级的DOM事件委托小于1KB
08-11
标题 "轻量级的DOM事件委托小于1KB" 指的是一个小型的JavaScript库或技术，它实现了DOM（文档对象模型）事件委托功能，并且整个实现的代码大小非常小，不超过1KB。在Web开发中，DOM事件委托是一种优化性能的策略，...
在 Web DataGrid 中当鼠标移到某行与离开时行的颜色发生改变(结合javascript)
hqt的专栏
04-28 1254
在head中添加javascript 代码如下: function sel(i) // 鼠标移上去后执行 {  eval(i+".style.background=#CCCC66"); // 更改行的颜色  eval(i+".style.cursor=hand"); // 鼠标移上去后变为手形 } function unsel(i) // 鼠标离开后执行 {  eval(i+".style
鼠标移动整行变色
zengshaotao的专栏
08-17 167
网上订餐系统 .td1{background-color:Silver;} //页面初始化时处理相关信息 $(function(){ //改变网页背景颜色 $("#changeBgColor").change(function(){ var bgCo...
鼠标移动上去后，行变色
天地会
04-24 801
方法一：   方法二： $(function(){   $(".thisTR").mouseover(function(){   $(this).removeClass();   $(this).addClass("trmouseOver"); }).mouseout(function(){   $(this).removeClass();   $(thi
在Web DataGrid中当鼠标移到某行与离开时行的颜色发生改变(结合javascript)
嗨！您好！Welcome my blog
10-11 628
在head中添加javascript 代码如下: function sel(i) // 鼠标移上去后执行 {  eval(i+".style.background=#CCCC66"); // 更改行的颜色  eval(i+".style.cursor=hand"); // 鼠标移上去后变为手形 } function unsel(i) // 鼠标离开后执行 {  eval(i+".style
javascript针对DOM的应用分析（四）
12-04
在实际开发中，为了提高代码复用性和可维护性，通常会使用事件委托。例如，可以在`<ul>`元素上设置一个单击事件监听器，然后在事件处理函数中判断哪个`<li>`元素被点击。这样做可以减少事件监听器的数量，同时简化...
【Web API DOM07】事件委托
最新发布
06-04
标题“【Web API DOM07】事件委托”揭示了我们今天要讨论的核心概念，即如何利用DOM（文档对象模型）的事件处理机制来实现更高效、灵活的事件绑定。 首先，让我们理解什么是事件委托。在Web开发中，事件通常被绑定...
JavaScript DOM应用
09-15
实践中，还需要注意性能优化，比如避免频繁的DOM操作，使用`innerHTML`的替代方案（如`createDocumentFragment`）来减少重绘和回流，以及使用事件委托来提高效率。 总之，JavaScript DOM应用是前端开发者必备的技能...
02-DOM_DOM_
10-04
**DOM（文档对象模型）详解** DOM，全称为Document Object Model，是一种标准的、平台无关的接口，允许程序和脚本动态更新、...通过不断实践和学习，我们可以更加熟练地运用DOM，构建出更具活力和交互性的网页应用。
鼠标移动变色代码
05-23
鼠标移动变色代码
HTML+CSS实现鼠标移动到某位置文本变色/显现效果
欢迎来到超级予的博客 Welcome to SuperAyu's Blog
09-28 8762
借助hover属性直接在text标签处修改即可。
实现鼠标移动表格行上，此行背景变色研究
技术就是个纸老虎---为之，则难者亦易矣；不为，则易者亦难矣。
11-21 4402
当我们鼠标移动表格某一个行上，此行背景变色，共找到3中方法，都实现如下效果：一、利用样式CSS表达式在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。完整代码如下：在样式里写表达式expression，实现鼠标经过表格行上变色        .tbDatalist        {            border: 1pxsolid#007108;            width: 60%;            border-collapse: collap
Javaweb鼠标事件案例分析—鼠标移入移出表格颜色变化
累计发表博客60余万字，CSDN 博客专家、Java 领域优质创作者、华为云享专家、阿里云专家博主。专注分享 Java 优质文章，毕设实战项目开发，全网粉丝10W+
09-04 5427
Hello，你好哇，我是灰小猿！一个超会写bug的程序员！ 最近在学习JavaWeb时，有用到鼠标移动事件，所以今天在这里记录一个相关的案例，同时也是对相关知识的一个巩固，效果为在鼠标移动到表格对应行列时，该行列的背景颜色发生变化。 效果如下： 其中用到是onmouseover和onmouseou事件t，同时还有一个作用相似的事件叫做onmousemove，所以在这里先对这三种鼠标事件做一个简单的对比： 在时间上：如果两个事件同时存在，先是onmousemove事件触发后，才会触发onmo.
web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变
山山4332的博客
12-25 583
【代码】web前端JQuery盒子案例，浏览到对应的地方盒子颜色变化。
4.9号 点击变色以后鼠标移上其他变色和滚动到某个位置然后一直在顶部
weixin_30950237的博客
04-09 73
一：点击变色以后鼠标移上其他的变色 <style type="text/css"> *{ margin:0px auto;} #kuang{ width:100px; height:50px;} .list{ width:100px; height:50px; background-color:...
html指针移动时变色,案例一 鼠标经过事件，变色 移动
weixin_39670511的博客
07-16 1060
一． 鼠标经过字体内容和背景变色二．例：饿哦额，额，额取想想天哥博毛福禄寿红草拨清波var z=document.getElementsByClassName('zi')[0];//console.log(z);z.onmouseover=function(){z.style.color='cyan';document.body.style.background='pink';}z....
鼠标移到表格的某一行，那一行变色的问题
热门推荐
rookie_s的博客
11-19 1万+
这个实现的过程很简单，网上相关实现的例子很多，这里记录下自己之前实现的方法。参考的网上的例子，网址不记得了。  这个问题简单点就是鼠标响应事件。 下面放代码     var rows = document.getElementsByTagName('tr');//取得行         for(var i=0 ;i         {             r
前端如何实现鼠标移上这个元素，另外一个元素变色
weixin_65635437的博客
06-02 2247
前端如何实现鼠标移上这个元素，另外一个元素变色
ui.pdf
02-27
1. **浏览器环境与DOM**： - 学习目标是理解浏览器环境的工作原理，包括文档对象模型（DOM）的概念。DOM是HTML文档的抽象表示，允许通过程序访问和操作网页内容。 - 文档介绍了如何遍历DOM树，如使用`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值