day08

最新推荐文章于 2024-05-20 08:00:00 发布

羡渔鱼余

最新推荐文章于 2024-05-20 08:00:00 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/empty_heart/article/details/101221857

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="./Jquery/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>

<body>
    <form name="myForm">
        <table class="table table-bordered" id="tab" name="tab" border="0px">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
                <td>操作</td>
                <td>操作</td>
            </tr>
            <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
                <td>1</td>
                <td>张三</td>
                <td>15</td>
                <td>湖南</td>
                <td><a href="#" onclick="addRow()">添加</a></td>
                <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            </tr>
            <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
                <td>2</td>
                <td>李四</td>
                <td>15</td>
                <td>湖南</td>
                <td><a href="#" onclick="addRow()">添加</a></td>
                <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            </tr>
            <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">
                <td>3</td>
                <td>王五</td>
                <td>15</td>
                <td>湖南</td>
                <td><a href="#" onclick="addRow()">添加</a></td>
                <td><a href="#" onclick="deleteRow(this)">删除</a></td>
            </tr>
        </table>
    </form>
</body>
    <script>
        var selectRow=null;
        //单击时,改变样式;
        function onClickChangeStyle(obj){
            //获取表格对象;
            var tab = document.getElementById("tab");
            //获取当前行选择下标;
            var currentRowIndex = obj.rowIndex;
            //获取表格所有行数;
            var tablRows = tab.rows.length;
            //循环表格的所有行;并且选择的当前行，改变背景颜色；
            for(var i = 1;i<tablRows;i=i+1){
                if(currentRowIndex == i){
                    //为选中的当前，设置css样式;
                    selectRow  = tab.rows[i];
                    tab.rows[i].className= "onClickStyle";
                }else{
                    //把没有选中的行的背景样式设置为白色;
                    tab.rows[i].className= "hideStyle";
                }
            }
        }

        //鼠标移入时，改变颜色;
        function onmouseOverMethod(selectThis){
            selectThis.className="displayStyle";
            if(selectRow==selectThis){
                selectThis.className="onClickStyle";
            }
        }

        //鼠标移除时，改变背景颜色;
        function onmouseOutMethod(selectThis){
            selectThis.className="hideStyle";
            if(selectRow == selectThis){
                selectThis.className="onClickStyle";
            }
        }

        //添加行;
        function addRow(){
            var tab = document.getElementById('tab');
            var rowIndex = tab.rows.length+1;

            //添加一行;
            var tr  = tab.insertRow();
            tr.onmouseover = tr.className="displayStyle" ;
            tr.onmouseout = tr.className="hideStyle" ;
            tr.onclick=function (){this.className="onClickChangeStyle(this)";}

            var td2 = tr.insertCell();
            var td3 = tr.insertCell();
            var td4 = tr.insertCell();
            var td5 = tr.insertCell();
            var td6 = tr.insertCell();
            var td7 = tr.insertCell();

            td2.innerHTML = ""+rowIndex;
            td3.innerHTML = "测试";
            td4.innerHTML = "测试";
            td5.innerHTML = "无地址";
            td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";
            td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";

            //初始化行;
            initRows(tab);
        }

        //初始化行,设置序列号;
        function initRows(tab){
            var tabRows = tab.rows.length;
            for(var i = 0;i<tabRows.length;i++){
                tab.rows[i].cells[0].firstChild.value=i;
            }
        }

        //删除行;(obj代表连接对象)
        function deleteRow(obj){
            var tab = document.getElementById('tab');
            //获取tr对象;
            var tr = obj.parentNode.parentNode;

            if(tab.rows.length>2){
                //tr.parentNode，指的是，table对象;移除子节点;
                tr.parentNode.removeChild(tr);
            }
            //重新生成行号;
            initRows(document.getElementById('tab'));
        }
    </script>
</html>

羡渔鱼余

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day08

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.m...
复制链接

扫一扫

day08

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