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

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

解决方案 »

  1.   


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