day08

weixin_42026679

于 2019-09-16 18:09:21 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/weixin_42026679/article/details/100896434

版权

在这里插入图片描述

源代码：

<!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-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
    <form name="myForm">
        <table class="table table-bordered" id="tab" name="tab" border="0px">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>地址</td>
                    <td>操作</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)"
                    onclick="onClickChangeStyle(this)">
                    <td>1</td>
                    <td>小明</td>
                    <td>20</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>16</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>20</td>
                    <td>上海</td>
                    <td><a href="#" onclick="addRow()">添加</a></td>
                    <td><a href="#" onclick="deleteRow(this)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>
<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>
</body>
</html>

weixin_42026679

关注

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/boots...
复制链接

扫一扫