委托应用-表单的创建和编辑 - 伊人怎会持宠而骄 - 博客园

委托应用-表单的创建和编辑

<!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>

posted on 2019-01-25 13:50 伊人怎会持宠而骄阅读(179) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部