鼠標移動到表格的某一行，該行會高亮顯示，並且有刪除編輯功能。鼠標一走後，該行恢復正常，並隱藏刪除編輯權限。因爲老闆要實現這樣的效果，所以不得不去花些時間去來開發這樣的功能。當然，這並非完全由本人自己開發出來的，也是參考了網上現有的例子，根據自己的實際需要而改編的。
效果如圖所示：
完整代碼：
<!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>