委托應用-表單的創建和編輯
阿新 • • 發佈：2019-01-25
title 預覽 xxxxxxxx 信息 pagex topic 獲取 splay 自動
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM操作</title>
</head>
<style>
#detail{
width:200px;
height:200px;
border:1px solid black;
display :none;
position:absolute;
left:500px;
top:300px;
background:#fff;
}
</style>
<body>
標題：<input type="text" id="topic_name" size=60/><br>
內容：<input type="text" id="topic_content" size=60/><br>
作者：<input type="text" id="author" size=60/><br>
<button id="saveBtn">保存</button>
<table id="tab" border=1>
<tr>
<th>ID</th><th>帖子名稱</th><th>內容預覽</th><th>發布時間</th><th>作者</th><th>操作</th>
</tr>
<tr class="first">
<td info="t">25</td>
<td info="t" class="title">ABC</td>
<td info="t">xxxxxxxx....</td>
<td info="t">2016-04-15</td>
<td info="t">LCE</td>
<td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
</tr>
<tr>
<td info="t">25</td>
<td info="t" class="title">ABC</td>
<td info="t">xxxxxxxx....</td>
<td info="t">2016-04-15</td>
<td info="t">LCE</td>
<td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
</tr>
<tr>
<td info="t">25</td>
<td info="t" class="title">ABC</td>
<td info="t">xxxxxxxx....</td>
<td info="t">2016-04-15</td>
<td info="t">LCE</td>
<td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
</tr>
<tr>
<td info="t">25</td>
<td info="t" class="title">ABC</td>
<td info="t">xxxxxxxx....</td>
<td info="t">2016-04-15</td>
<td info="t">LCE</td>
<td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
</tr>
<tr>
<td info="t">25</td>
<td info="t" class="title">ABC</td>
<td info="t">xxxxxxxx....</td>
<td info="t">2016-04-15</td>
<td info="t">LCE</td>
<td name="option"><a name="detail" href="#">詳細信息</a> <a class="delbtn" href="javascript:;">刪除</a></td>
</tr>
<table>
<div id="detail"></div>
</body>
</html>
<script src="public.js"></script>
<script>
var tab = $id("tab");
//添加保存按鈕的點擊事件
$id("saveBtn").onclick = function(){
//查找第一行
var oTr = document.querySelector(".first");
//克隆表格的第一行
var cloneTr = oTr.cloneNode( true );
cloneTr.children[0].innerHTML = rand(1,100);
cloneTr.children[1].innerHTML = $id("topic_name").value;
cloneTr.children[2].innerHTML = $id("topic_content").value;
cloneTr.children[3].innerHTML = dateToString( new Date() );
cloneTr.children[4].innerHTML = $id("author").value;
// 將克隆的行添加到table裏
tab.appendChild( cloneTr );
}
// 給table添加點擊事件
tab.onclick = function(e){
var e = e || event;
var target = e.target || e.srcElement;
//從新獲取可以進行編輯的事件源
if( target.getAttribute("info") == "t" ){
//創建一個input
var opt = create("input");
opt.type = "text";
//將target的內容添加到文本框中
opt.value = target.innerHTML;
//然後清空target中的內容
target.innerHTML = "";
target.appendChild( opt );
//讓某個元素自動獲取焦點
opt.focus();//文本框自動獲取焦點
//當文本框失去焦點時
//將文本框的內容添加到target中
opt.onblur = function(){
target.innerHTML = this.value;
}
}
//詳細信息
if( target.name == "detail" ){
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
$id("detail").style.display = "block";
$id("detail").style.left = e.pageX + "px";
$id("detail").style.top = e.pageY + "px";
var title = target.parentNode.parentNode.children[1].innerHTML;
var author = target.parentNode.parentNode.children[4].innerHTML;
//顯示詳情
$id("detail").innerHTML = "標題:" + title + "<br>作者:" + author;
}
//刪除
if( target.className == "delbtn" ){
if( confirm("確定要刪除？") ){
target.parentNode.parentNode.remove();
}
}
}
//點擊文檔 隱藏詳情
document.onclick = function(){
$id("detail").style.display = "none";
}
</script>
委托應用-表單的創建和編輯