主要是使用的onload（）、onmouseover和onmouseout的相关应用，满足此次的相关操作。

具体的相关的两个代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>全选和全不选</title>

        <script>

            function checkAll(){

                //1.获取编号前面的复选框

                var checkAllEle = document.getElementById("checkAll");

                //2.对编号前面复选框的状态进行判断

                if(checkAllEle.checked==true){

                    //3.获取下面所有的复选框

                    var checkOnes = document.getElementsByName("checkOne");

                    //4.对获取的所有复选框进行遍历

                    for(var i=0;i<checkOnes.length;i++){

                        //5.拿到每一个复选框，并将其状态置为选中

                        checkOnes[i].checked=true;

                    }

                }else{

                    //6.获取下面所有的复选框

                    var checkOnes = document.getElementsByName("checkOne");

                    //7.对获取的所有复选框进行遍历

                    for(var i=0;i<checkOnes.length;i++){

                        //8.拿到每一个复选框，并将其状态置为未选中

                        checkOnes[i].checked=false;

                    }

                }

            }

        </script>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center" >

            <thead>

                <tr>

                    <td colspan="4">

                        <input type="button" value="添加" />

                        <input type="button" value="删除" />

                    </td>

                </tr>

                <tr>

                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr >

                    <td><input type="checkbox" name="checkOne"/></td>

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr >

                    <td><input type="checkbox" name="checkOne"/></td>

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr >

                    <td><input type="checkbox" name="checkOne"/></td>

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr >

                    <td><input type="checkbox" name="checkOne"/></td>

                    <td>4</td>

                    <td>赵六</td>

                    <td>29</td>

                </tr>

                <tr >

                    <td><input type="checkbox" name="checkOne"/></td>

                    <td>5</td>

                    <td>田七</td>

                    <td>30</td>

                </tr>

                <tr >

                    <td><input type="checkbox" name="checkOne"/></td>

                    <td>6</td>

                    <td>汾九</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格隔行换色</title>

        <script>

            window.onload = function(){

                //1.获取表格

                var tblEle = document.getElementById("tbl");

                //2.获取表格中tbody里面的行数(长度)

                var len = tblEle.tBodies[0].rows.length;

                //alert(len);

                //3.对tbody里面的行进行遍历

                for(var i=0;i<len;i++){

                    if(i%2==0){

                        //4.对偶数行设置背景颜色

                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";

                    }else{

                        //5.对奇数行设置背景颜色

                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";

                    }

                }

            }

        </script>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center" id="tbl">

            <thead>

                <tr>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr >

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr >

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr >

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr >

                    <td>4</td>

                    <td>赵六</td>

                    <td>29</td>

                </tr>

                <tr >

                    <td>5</td>

                    <td>田七</td>

                    <td>30</td>

                </tr>

                <tr >

                    <td>6</td>

                    <td>汾九</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

onfocus/onblur：聚焦离焦事件，用于表单的验证的时候比较合适

onclick/ondbclick:鼠标的点击和双击事件

onkeydowen/onkeypress:搜索引擎是经常使用

onload:页面加载事件，所有的其他的操作（匿名方式）都可以放到这个绑好的函数里面

onmouseover/onmouseout/onmousemove:购物车应用比较多

onsubmit:表单的提交

onchange:用于二级联动

js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用的更多相关文章

  1. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  2. JS实现表单多文件上传样式美化支持选中文件后删除相关项

    http://www.youdaili.net/javascript/5903.html

  3. JQuery 表格 隔行换色 和鼠标滑过的样式

    $(document).ready(function () { $(".Pub_TB tbody tr:even td").css("background-color&q ...

  4. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  5. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  6. JS给TR隔行换色，鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  7. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  8. JS应用实例4：表格隔行换色

    HTML代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. php29号小结（隔行换色······）

    1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...

随机推荐

  1. python3：input() 函数

    一.知识介绍: 1.input() 函数,接收任意输入,将所有输入默认为字符串处理,并返回字符串类型: 2.可以用作文本输入,如用户名,密码框的值输入: 3.语法:input("提示信息:& ...

  2. H5页面,输入框的光标,如果页面上下滑动光标停留在页面上,除了输入框外,松手过了一段时间才跑回输入框里面

    有点类似这种情况 其中一个博主描述得比较详细,主要还有图 我是直接在App.vue主文件那里添加一下代码,主要是添加一个监听器,如果touchmove的时候就会触发让其失焦,就会消失那个光标,需要再次 ...

  3. 建议10:建议使用splice删除数组

    删除数组元素的方法有很多种,最简单就是利用length属性来截断数组,但这种方法比较笨,进能够截断尾部元素.在JS中,由于数组其实就是对象,因此可以使用delete运算符可以从数组中移除元素 var ...

  4. 升级cocoapods到指定版本

    把cocoapods升级到1.7.4 sudo gem install -n /usr/local/bin cocoapods -v 1.7.4

  5. 33. CentOS7 静态ip设置

    1.网络连接选择NAT模式: 2.关闭vmware的dhcp:选择编辑-->虚拟网络编辑器,选择VMnet8,去掉使用本地DHCP服务将ip地址分配给虚拟机(D). 3. 点击NAT设置(S)查 ...

  6. WebStorm添加Angular2服务启动的脚本命令

    注意:选择的start在package.json可以修改. 例如添加一个run命令:

  7. 题解 P1278 【单词游戏】

    前言 首先,看到这道题目,我首先想到的是暴搜,通过\(vector\)来搞,代码也是很短的. 这里用了一个类似于分治的思想 把一个大问题转化为小问题 先枚举第一个单词,之后把能拼接在它后面的单词都一个 ...

  8. leetcode 签到 914. 卡牌分组

    题目 给定一副牌,每张牌上都写着一个整数. 此时,你需要选定一个数字 X,使我们可以将整副牌按下述规则分成 1 组或更多组: 每组都有 X 张牌. 组内所有的牌上都写着相同的整数. 仅当你可选的 X ...

  9. MFC之登录框的问题处理

    1.在做登录框的时候,把登录框做成模态对话框,并且放在 主界面程序所在窗口打开之前.也就是放在主界面类的InitInstance()里.这样做就会在弹出主界面之前被登录框弹出模态框出来阻塞住. 1.但 ...

  10. 【WPF学习】第六十一章 组织模板资源

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动. 当使用控件模板时,需要决定如何更广泛地共享模板,以及是否希望自动地 ...