鼠标移动到表格的某一行,该行会高亮显示,并且有删除编辑功能。鼠标一走后,该行恢复正常,并隐藏删除编辑权限。因为老板要实现这样的效果,所以不得不去花些时间去来开发这样的功能。当然,这并非完全由本人自己开发出来的,也是参考了网上现有的例子,根据自己的实际需要而改编的。

效果如图所示:

鼠标移动到表格某一行事件

完整代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
    div{display:none;}
    p, td, th {
    font: 0.8em Arial, Helvetica, sans-serif;
    }
    .datatable {
    border: 1px solid #D6DDE6;
    border-collapse: collapse;
    width: 80%;
    }
    .datatable td {
    border: 1px solid #D6DDE6;
    padding: 4px;
    }
    .datatable th {
    border: 1px solid #828282;
    background-color: #BCBCBC;
    font-weight: bold;
    text-align: left;
    padding-left: 4px;
    }
    .datatable tr:hover, .datatable tr.hilite {
    background-color: #DFE7F2;
    color: #000000;
    }
    .datatable tr:hover, .datatable tr.hilite div{display:block; float:left; cursor:pointer;}
    </style>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var rows = document.getElementsByTagName('tr');
            for (var i = 0; i < rows.length; i++) {
                if (i != 0) {
                    rows[i]. = function () {
                        this.className += ' hilite';
                    }
                    rows[i]. = function () {
                        this.className = this.className.replace('hilite', '');
                    }
                }
            }
        })
        function delRow(e) {
            //var evt = e || event;

           deleteRow(e)
            var k = document.getElementById("mytable");
           // k.deleteRow(evt.target.parentNode.parentNode.cells[0].innerHTML);
            for (var i = 0; i < k.rows.length; i++) {
                if (i != 0)
                    k.rows[i].cells[0].innerHTML = i;
            }
            if (k.rows.length <= 1) {
                AddRow();
            }
        }

       function deleteRow(obj) {
            mytable.deleteRow(obj.parentElement.parentElement.rowIndex);
        }
        //添加一行
        function AddRow() {
            var k = document.getElementById("mytable");
            var newrow = k.insertRow(k.rows.length);
            newrow.innerHTML = "<tr><td colspan='2'>暂无数据</td></tr>";
        }
    </script>
</head>
<body>
    <table id="mytable" class="datatable">
      <tr>
        <th>序号</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>1</td>
        <td><div>编辑|</div><div onclick="delRow(this)">删除</div></td>
      </tr>
      <tr>
        <td>2</td>
        <td><div>编辑|</div><div onclick="delRow(this)">删除</div></td>
      </tr>
      <tr>
        <td>3</td>
        <td><div>编辑|</div><div onclick="delRow(this)">删除</div></td>
      </tr>
      <tr>
        <td>4</td>
        <td><div>编辑|</div><div onclick="delRow(this)">删除</div></td>
      </tr>
    </table>
</body>
</html>