<!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>
原文地址：https://www.cnblogs.com/tis100204/p/10319231.html