js dom实现添加好友并可以移动数据

qq_42846915 2018-07-31 08:09:38


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addFriend(){
var mytable=document.getElementById('mytable');
var addTr=mytable.createAttribute('tr');
var addTdName=addTr.createAttribute('td');
// var addTdDel=addTr.createAttribute('td');
// var addTrUp=addTr.createAttribute('td');
// var addTrDown=addTr.createAttribute('td');
mytable.appendChild(addTr);
var myinput=document.getElementById('input');
var name=document.createTextNode(myinput);
addTdName.innerHTML=''+name+<td onclick="del()">删除</td>+<td onclick="up()">上移</td>+<td onclick="down()">下移</td>+''
}
function del(){
document.removeChild();
}
function up(){
var before=this.previousSibling
if(before!=null){
document.insertBefore(this,'before');
}else {
prompt('当前已经是顶层!')
}

}
function down(){
var after=this.nextElementSibling
if(after!=null){
document.insertBefore('before',this);
}else {
prompt('当前已经是最后!')
}

}
</script>
</head>
<body>
<table id="mytable">
<input type="text" placeholder="请输入好友姓名" id="input">
<input name="btn" type="button" value="提交" onclick="addFriend()"/>
<!--<ul>-->
<!--<li>name</li>-->
<!--</ul>-->
</table>
</body>
</html>
...全文
114 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2018-07-31
  • 打赏
  • 举报
回复

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<title>Title</title>
<script>
function addFriend(){
var mytable=document.getElementById('mytable');
var addTr = document.createElement('tr');
var name = document.getElementById("input").value;
mytable.appendChild(addTr);
addTr.innerHTML='<td>'+name+'</td><td onclick="del(this)">删除</td><td onclick="up(this)">上移</td><td onclick="down(this)">下移</td>';
}
function del(t){
var tr = t.parentNode;
tr.parentNode.removeChild(tr);
}
function up(t){
var tr = t.parentNode;
var to = tr.previousElementSibling;
if(to!=null){
tr.parentNode.insertBefore(tr,to);
}else {
alert('当前已经是顶层!')
}

}
function down(t){
var tr = t.parentNode;
var to = tr.nextElementSibling;
if(to!=null){
tr.parentNode.insertBefore(to,tr);
}else {
alert('当前已经是最后!')
}

}
</script>
</head>
<body>
<input type="text" placeholder="请输入好友姓名" id="input">
<input name="btn" type="button" value="提交" onclick="addFriend()"/>
<table id="mytable">
</table>
</body>
</html>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧