js的行变色的鼠标事件代码

最新推荐文章于 2021-01-30 23:52:22 发布
最新推荐文章于 2021-01-30 23:52:22 发布
阅读量384 收藏
点赞数
分类专栏： javascript
 <style type="text/css">
    .one {
background-color:#660;}
.two {
background-color:#9F0;}
.over {
background-color:#F69;}
    </style>
    <script type="text/javascript">
function cY() {
var name;
    var idNode = document.getElementById("info");//获得table的id节点
var cNode = idNode.rows;

for(var x=1; x<cNode.length-1; x++) {

//遍历隔行的颜色设置成两种颜色

if(x%2==1) { 
cNode[x].className = "one";

}else {cNode[x].className = "two";}

//onmouseover 事件会在鼠标指针移动到指定的对象上时发生颜色改变

cNode[x].onmouseover = function() {
name = this.className;
this.className = "over";
}
cNode[x].onmouseout = function() {
this.className = name;
}
}
}
onload = function () {
cY();
}
    </script>

</head>

<body>
<table id="info">
    <tr>
        <th>
    <input type="checkbox" name="it" οnclick="getSum"  />全选
            </th>
    <th>收件人</th>
        <th>邮件名称</th>
        <th>邮件附属信息</th>
        </tr>
      
        <tr>
        <td>
            <input type="checkbox" name="m" />
            </td>
            <td>张三11</td>
            <td>我的邮件名称11</td>
            <td>邮件附属信息11</td>
        </tr>
        <tr>
        <td>
            <input type="checkbox" name="m" />
            </td>
            <td>张三11</td>
            <td>我的邮件名称11</td>
            <td>邮件附属信息11</td>
        </tr>
       
      
        <tr>
        <th>
        <input type="checkbox" name="ty"  />全选
            </th>
            <th colspan="3">
            <input type="button" value="全选" />
                <input type="button" value="取消全选" />
                <input type="button" value="反选" />
                <input type="button" value="删除所选材料" />
            </th>
        </tr>
    </table>
</body>
</html>

ysr2016
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯JS代码实现隔行变色鼠标移入高亮
10-21
主要介绍了纯JS代码实现隔行变色鼠标移入高亮的相关资料,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
html 鼠标经过表格列,JavaScript实现鼠标经过表格某行时此行变色
weixin_42531516的博客
06-04 793
本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码，供大家参考，具体内容如下表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。鼠标经过表格变色table {margin: 200px auto;font-size: 12px;border-collapse: collapse;width: 500px;height: 50px;}table ...
JavaScript-鼠标移动到哪行哪行变色
曹学成的博客
07-11 849
前几天，看晓鸿的博客有一个类似的博客。今天也学习了一下。HTML：6行4列&lt;body&gt; &lt;table border="1" id="tbl"&gt; &lt;tr&gt; &lt;td&gt; 11111111 &lt;/td&gt; &
JS 实现鼠标进入变色
夏沐的博客
01-13 4002
HTML部分： &lt;ul&gt; &lt;li&gt;金士百&lt;/li&gt; &lt;li&gt;雪花&lt;/li&gt; &lt;li&gt;百威&lt;/li&gt; &lt;li&gt;燕京&lt;/li&gt; &lt;li&gt;青岛&lt;/li&gt; &lt;li&amp
JavaScript鼠标移入移出时颜色变化代码
dusea的博客
08-31 9295
判断鼠标在网页的某个区域移动 转自http://jingyan.baidu.com/article/ac6a9a5e5c040b2b653eac25.html，这里面还有些其他有用的操作 鼠标移入移出时颜色变化代码 <input type="submit" value="把鼠标移动这里" name="btn1" onMouseOut=this.style.color="blue" o
js隔行变色、鼠标划过变色代码
01-19
隔行变色且鼠标划过变色的效果 .container ul{margin:0;padding:0;} .container li{cursor:pointer;height:30px;width:200px;background-color:#FFC;line-height:30px;text-indent:1em;font-size:12px;} .container...
JS实现鼠标经过背景自动变色特效代码
03-20
JS实现鼠标经过背景自动变色代码
JavaScript实现鼠标点击导航栏变色特效
10-20
本文给大家分享一段基于js代码实现的鼠标点击导航栏变色效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下
鼠标移动过去变大变绿
weixin_33737134的博客
09-30 89
原始代码   &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tr...
style对象的使用，当鼠标移动到时背景颜色变为黄色,当鼠标离开时变为蓝色
weixin_42044486的博客
11-13 1921
&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" /&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
js 当鼠标移动到表格一行上时，该行背景颜色改变
热门推荐
xyr05288的专栏
05-08 1万+
1. js，当鼠标移动到表格一行上时，该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.className+='highlight'; } rows[i].o
js table鼠标点击时变色
dxm809的博客
03-18 2482
&lt;head&gt;    &lt;title&gt;&lt;/title&gt;    &lt;script type="text/javascript"&gt;        //鼠标移动到表格行，被点击的行高亮显示（背景是红色），其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。//对于table、div、span这类型元素没有onfocus...
用Javascript实现鼠标经过某一行，那一行变色
茂茂的博客
01-30 2150
用Javascript实现鼠标经过某一行，那一行变色 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 我们在浏览网页时，经常会遇见这种情况，就是有多行显示时，你的鼠标经过这些行，便会使这些行变成其他的颜色，离开了又变回原来的颜色，用来区分你现在鼠标所停留的是哪行。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
JS实现点击行改变颜色
王世洪的博客
09-20 2319
在实际项目开发中，有些开发出来的报表的数据量是比较大的，或者是多维度的大数据分析报表，在这个时候，为了观察方便，我们一般会对报表进行底色区分，改变每个隔行的颜色，方便用户对报表数据进行阅读。 然而，有些应用场景中，隔行区分颜色不一定能满足阅读的需求，或报表页面中有分模块的颜色区分，此时用隔行颜色差对页面的色彩布局影响不是很好；用户实际应用时，希望的是在用户点击单元格时，改变当前单元格所在行的背景...
编写js+css+html实现鼠标指针经过某一行时，实现该行背景颜色变色
girls的博客
12-21 1804
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { wid
用js实现表格中鼠标移动行变色
hfbatu的专栏
07-28 1304
 <!--var rows = document.getElementsByTagName(tr);for (var i=0;i<rows.length;i++){ rows[i].onmouseover = function(){ //鼠标在行上面的时候 this.className += altrow; } rows[i].onmouseout = func
js实现隔行变色操作鼠标经过效果
yuxing198812的专栏
06-21 121
js实现隔行变色操作鼠标经过效果，下面是javascript代码 [code="javascript"] /**隔行变色**/ function changColor() { var table_Element = document.getElementById("table_style"); var tr_Element = table_Element.r...
bootstrap 选中行变色
最新发布
05-25
以下是一个使用 jQuery 实现选中行变色的示例代码： ```html <td>John <td>Doe <td>[email protected]</td> <td>Jane <td>Doe <td>[email protected]</td> <td>Bob <td>Smith <td>bob@example....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值