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