JavaScript-5.4-JavaScript 事件-案例
案例
一：對錶格進行修改刪除操作
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>對錶格進行修改刪除操作</title>
<style type="text/css">
div{
height: 300px;
width: 700px;
margin:50px auto;
}
#table{
width: 100%;
height: 200px;
border-collapse:collapse;
border-spacing:0;
}
#table th,td{
border:1px solid #c5c9ce;
}
#table td{
text-align: center;
}
#table th{
background-color: #95b3d4;
color: #fff;
}
/*td一行中的最後一個單元格*/
#table td:last-child{
color:#2172b8;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<table id="table">
<tr>
<th>用戶ID</th>
<th>用戶姓名</th>
<th>手機號碼</th>
<th>狀態</th>
<th>操作</th>
</tr>
<tr>
<td>zhangsan</td>
<td>張山</td>
<td>15814535980</td>
<td>可用</td>
<td>
<a onclick="update(1)">修改</a>
<a onclick='deletes(1)'>刪除</a>
</td>
</tr>
<tr>
<td>lisi</td>
<td>李四</td>
<td>15845652147</td>
<td>可用</td>
<td>
<a onclick="update(2)">修改</a>
<a onclick='deletes(2)'>刪除</a>
</td>
</tr>
<tr>
<td>wanger</td>
<td>王二</td>
<td>12547854562</td>
<td>可用</td>
<td>
<a onclick="update(3)">修改</a>
<a onclick='deletes(3)'>刪除</a>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
var table = document.getElementById('table');
// 刪除操作
function deletes(index){
var cells = table.rows[index].cells;
if(!confirm('您確定刪除一條記錄嗎？')){
alert('操作已取消');
return;
}
for(var i=0;i<cells.length;i++){
cells[i].style.color="#ccc";
cells[i].style.textDecoration="line-through";
cells[i].style.cursor="text";
}
// 取到 td 一行中的最後一個單元格
var a = cells[cells.length-1].getElementsByTagName('a');
// var a = document.getElementsByTagName('a');
// 移除屬性
a[0].removeAttribute("onclick");
// a[0].removeAttribute("cursor");
a[1].removeAttribute("onclick");
}
// 修改操作
function update(index){
var cells = table.rows[index].cells;
var a = cells[cells.length-1].getElementsByTagName('a');
// var a = document.getElementsByTagName('a');
if(a[0].innerText=='修改'){
for(var i=0;i<cells.length-1;i++){
// 當 contenteditable 爲 true 是表格可被編輯
cells[i].setAttribute('contenteditable','true');
}
a[0].innerText = '完成';
}else{
for(var i=0;i<cells.length-1;i++){
cells[i].setAttribute('contenteditable','false');
}
a[0].innerText = '修改';
}
// 不知道爲啥沒用
document.onkeydup = function(e){
var evn = window.event;
var code = evn.keyCode;
if(code == 13){
return false;
for(var i=0;i<cells.length-1;i++){
cells[i].setAttribute("contenteditable","false");
}
a[0].innerText="修改";
}
}
}
</script>
</html>
效果動態圖
