JavaScript的特效

最新推荐文章于 2024-08-14 17:24:57 发布

FairyKunKun

最新推荐文章于 2024-08-14 17:24:57 发布

阅读量1.3k

点赞数

文章标签： HTML JS

本文链接：https://blog.csdn.net/FairyKunKun/article/details/124084348

版权

例1：当光标移动到数据行上，添加背景色，光标离开后，背景色取消，不含表头。

基础代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            
        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            
        }
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

困难：如何给tr行设置样式？具备dom编程能力。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)">
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)">
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)">
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            trObj.className = "selected";
        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            trObj.className = "";
        }
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

在标签中绑定事件，导致代码重复率高，优化：js统一来绑定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            trObj.className = "selected";
        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            trObj.className = "";
        }
        // 统一绑定事件
        // 获取所有的tr——>数组
        // getElementByTagName根据标签名来获取标签对象
        var trObjs = document.getElementsByTagName("tr");
        // console.debug(trObjs.length);
        for (var i = 1 ; i < trObjs.length ; i++) {
            // 除了第一行以外的所有行
            var trObj = trObjs[i];
            //为每一行绑定事件
            trObj.onmouseover = function () {
                selectTr(this);
            };
            trObj.onmouseout = function () {
                unselectTr(this);
            };
        }
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

例2：全选和取消

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                全选/取消
                <input type = "checkbox"/>
            </td>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox"/>
            </td>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox"/>
            </td>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox"/>
            </td>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            trObj.className = "selected";
        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            trObj.className = "";
        }
        // 统一绑定事件
        // 获取所有的tr——>数组
        // getElementByTagName根据标签名来获取标签对象
        var trObjs = document.getElementsByTagName("tr");
        // console.debug(trObjs.length);
        for (var i = 1 ; i < trObjs.length ; i++) {
            // 除了第一行以外的所有行
            var trObj = trObjs[i];
            //为每一行绑定事件
            trObj.onmouseover = function () {
                selectTr(this);
            };
            trObj.onmouseout = function () {
                unselectTr(this);
            };
        }
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

思路：

（1）实现全选和取消的效果

找到相应的复选框，id标识

结合document.getElementById(“choiceCK”)----》input type = checkbox对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                全选/取消
                <input type = "checkbox" id = "choiceCK"/>
            </td>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox"/>
            </td>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox"/>
            </td>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox"/>
            </td>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            trObj.className = "selected";
        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            trObj.className = "";
        }
        // 统一绑定事件
        // 获取所有的tr——>数组
        // getElementByTagName根据标签名来获取标签对象
        var trObjs = document.getElementsByTagName("tr");
        // console.debug(trObjs.length);
        for (var i = 1 ; i < trObjs.length ; i++) {
            // 除了第一行以外的所有行
            var trObj = trObjs[i];
            //为每一行绑定事件
            trObj.onmouseover = function () {
                selectTr(this);
            };
            trObj.onmouseout = function () {
                unselectTr(this);
            };
        }
        
        //全选和取消的效果
        //获取全选和取消的复选框
        var choiceCKObj = document.getElementById("choiceCK");
        //给全选和取消的复选框绑定单击事件
        choiceCKObj.onclick = function () { 
            //做事
            if (choiceCKObj.checked) {//全选
                console.debug("全选");
            } else {
                console.debug("取消");
            }
        }
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

获取第二、三、四行的复选框，把它们分为一组，使用name属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                全选/取消
                <input type = "checkbox" id = "choiceCK"/>
            </td>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            trObj.className = "selected";
        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            trObj.className = "";
        }
        // 统一绑定事件
        // 获取所有的tr——>数组
        // getElementByTagName根据标签名来获取标签对象
        var trObjs = document.getElementsByTagName("tr");
        // console.debug(trObjs.length);
        for (var i = 1 ; i < trObjs.length ; i++) {
            // 除了第一行以外的所有行
            var trObj = trObjs[i];
            //为每一行绑定事件
            trObj.onmouseover = function () {
                selectTr(this);
            };
            trObj.onmouseout = function () {
                unselectTr(this);
            };
        }

        //全选和取消的效果
        //获取全选和取消的复选框
        var choiceCKObj = document.getElementById("choiceCK");
        //给全选和取消的复选框绑定单击事件
        choiceCKObj.onclick = function () {
            //做事
            if (choiceCKObj.checked) {//全选
                console.debug("全选");
            } else {
                console.debug("取消");
            }
        }
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                全选/取消
                <input type = "checkbox" id = "choiceCK"/>
            </td>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            // trObj.className = "selected";

        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            // trObj.className = "";
        }
        // 统一绑定事件
        // 获取所有的tr——>数组
        // getElementByTagName根据标签名来获取标签对象
        var trObjs = document.getElementsByTagName("tr");
        // console.debug(trObjs.length);
        for (var i = 1 ; i < trObjs.length ; i++) {
            // 除了第一行以外的所有行
            var trObj = trObjs[i];
            //为每一行绑定事件
            trObj.onmouseover = function () {
                selectTr(this);
            };
            trObj.onmouseout = function () {
                unselectTr(this);
            };
        }

        //全选和取消的效果
        //获取全选和取消的复选框
        var choiceCKObj = document.getElementById("choiceCK");

        // 获取name为ballId的所有复选框
        // getElementByName根据标签中的name属性获取元素对象
        var ballIdObjects = document.getElementsByName("ballId");
        // console.debug(ballIdObjects.length);

        //给全选和取消的复选框绑定单击事件
        choiceCKObj.onclick = function () {
            //做事
            if (choiceCKObj.checked) {//全选
                // console.debug("全选");
                for (var i = 0 ; i < ballIdObjects.length ; i++) {
                    ballIdObjects[i].checked = true;
                }
            } else {
                // console.debug("取消");
                for (var i = 0 ; i < ballIdObjects.length ; i++) {
                    ballIdObjects[i].checked = false;
                }
            }
        };
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>

（2）操作行数据中的复选框对全选和取消的影响

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/>
    <title>JavaScript的特效</title>
    <style type = "text/css">
        table{
            width: 500px;
            margin: 0 auto;
            border-spacing: 0;
            border-collapse: collapse;
        }
        table tr{
            height: 30px;
            line-height: 30px;
        }
        table tr td{
            border: 1px solid red;
            text-align: center;
        }
        /*添加背景色*/
        .selected{
            background-color: pink;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>
                全选/取消
                <input type = "checkbox" id = "choiceCK"/>
            </td>
            <td>排名</td>
            <td>球队</td>
            <td>胜</td>
            <td>负</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>1</td>
            <td>热火</td>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>2</td>
            <td>凯尔特人</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <input type = "checkbox" name = "ballId"/>
            </td>
            <td>3</td>
            <td>雄鹿</td>
            <td>1</td>
            <td>3</td>
        </tr>
    </table>
    <script type = "text/javascript">
        //选择一行，该行添加背景色
        function selectTr(trObj) {
            // trObj.className = "selected";

        }
        // 离开一行，取消背景色
        function unselectTr(trObj) {
            // trObj.className = "";
        }
        // 统一绑定事件
        // 获取所有的tr——>数组
        // getElementByTagName根据标签名来获取标签对象
        var trObjs = document.getElementsByTagName("tr");
        // console.debug(trObjs.length);
        for (var i = 1 ; i < trObjs.length ; i++) {
            // 除了第一行以外的所有行
            var trObj = trObjs[i];
            //为每一行绑定事件
            trObj.onmouseover = function () {
                selectTr(this);
            };
            trObj.onmouseout = function () {
                unselectTr(this);
            };
        }

        //全选和取消的效果
        //获取全选和取消的复选框
        var choiceCKObj = document.getElementById("choiceCK");

        // 获取name为ballId的所有复选框
        // getElementByName根据标签中的name属性获取元素对象
        var ballIdObjects = document.getElementsByName("ballId");
        // console.debug(ballIdObjects.length);

        //给全选和取消的复选框绑定单击事件
        choiceCKObj.onclick = function () {
            //做事
            if (choiceCKObj.checked) {//全选
                // console.debug("全选");
                for (var i = 0 ; i < ballIdObjects.length ; i++) {
                    ballIdObjects[i].checked = true;
                }
            } else {
                // console.debug("取消");
                for (var i = 0 ; i < ballIdObjects.length ; i++) {
                    ballIdObjects[i].checked = false;
                }
            }
        };

        //操作数据行中的复选框对全选和取消的影响
        for (var i = 0 ; i < ballIdObjects.length ; i++) {
            ballIdObjects[i].onclick = function () {
                if (this.checked) {
                    var cnt = 0;
                    for (var j = 0 ; j < ballIdObjects.length ; j++) {
                        if (ballIdObjects[j].checked) {
                            cnt++;
                        } 
                    } 
                    if (cnt == ballIdObjects.length) {
                        choiceCKObj.checked = true;
                    } 
                } else {
                    choiceCKObj.checked = false;
                }
            }
        } 
    </script>
    <!--<script type = "javascript" src="../js/me.js"></script>-->
    <!--&lt;!&ndash;在页面标签加载完毕以后再引入JS文件可以优化用户体验&ndash;&gt;-->
</body>
</html>