信息提交范本-javascript

时间：2017-10-08 12:11:52 阅读：161 评论：0 收藏：0 [点我收藏+]
标签：turn ack rip 日期 color 操作 var sheet load
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <title></title>
<style>
._body input{
    width:250px;
    height: 25px;
    border: 1px solid indianred;
}

._table{
    width: 100%;
    margin-top: 20px;
}

tr th,tr td{
    border: 1px solid black;
    text-align: center;
}

.red{
    background: red;
    color: white;

}

.blue{
    background:blue;
    color: white;
}
</style>
</head>
<body class="_body" style="text-align: center">
<label for="name">姓名<input type="text" id="name"/></label><br/>
<label for="sex">性别<input type="text" id="sex"/></label><br/>
<label for="age">年龄<input type="text" id="age"/></label><br/>
<button type="button" id="submit" class="red">提交</button>
<button id="submit_next" type="button" class=‘blue‘>确认提交</button>


<table class="_table">
    <thead><tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
            <th>日期</th>
        </tr></thead>
    <tbody id="content"></tbody>
</table>

<script>
    function id(idName){
        return document.getElementById(idName);
    }

    window.onload=function(){
        id("submit").onclick=function(){

            var tr=document.createElement("tr");
            var name=id("name").value;
            var sex=id("sex").value;
            var age=id("age").value;

            //姓名
            var name1=document.createElement("td");//节点
            var name2=document.createTextNode(name);//文本节点
            name1.appendChild(name2);

            //性别
            var sex1=document.createElement("td");
            var sex2=document.createTextNode(sex);
            sex1.appendChild(sex2);

            //年龄
            var age1=document.createElement("td");
            var age2=document.createTextNode(age);
            age1.appendChild(age2);

            //操作
            var handle1=document.createElement("td");
            var handle2="<button type=‘button‘ onclick=‘_delete(this)‘ class=‘red‘>删除</button>";
            handle2+="<button type=‘button‘ onclick=‘_compile(this)‘ class=‘blue‘>编辑</button>";
            handle1.innerHTML=handle2;

            //日期
            var day1=document.createElement("td");
            var day2=new Date();
            day1.innerHTML=day2;

            tr.appendChild(name1);
            tr.appendChild(sex1);
            tr.appendChild(age1);
            tr.appendChild(handle1);
            tr.appendChild(day1);

            id("content").appendChild(tr);
            id("name").value=id("sex").value=id("age").value=null;
        }



        //确认提交
        id("submit_next").onclick=function(){

            flag.parentNode.previousSibling.previousSibling.previousSibling.innerHTML=id("name").value;
            flag.parentNode.previousSibling.previousSibling.innerHTML=id("sex").value;
            flag.parentNode.previousSibling.innerHTML=id("age").value;

            id("submit").style.display="inline";
            id("submit_next").style.display="none";
            id("name").value=id("age").value=id("sex").value=null;
        }
    }
    var flag=null;


    //删除
    function _delete(tst){
        id("content").removeChild(tst.parentNode.parentNode);
        id("name").value=id("sex").value=id("age").value=null;
    }

    //编辑
    function _compile(rst){
        flag=rst;
        id("name").value=rst.parentNode.previousSibling.previousSibling.previousSibling.innerHTML;
        id("sex").value=rst.parentNode.previousSibling.previousSibling.innerHTML;
        id("age").value=rst.parentNode.previousSibling.innerHTML;
        id("submit").style.display="none";
        id("submit_next").style.display="inline";
    }
</script>
<script>
    function id(idName){
        return document.getElementById(idName);
    }

    window.onload=function(){
        id("submit").onclick=function(){

            var tr=document.createElement("tr");
            var name=id("name").value;
            var sex=id("sex").value;
            var age=id("age").value;

            //姓名
            var name1=document.createElement("td");//节点
            var name2=document.createTextNode(name);//文本节点
            name1.appendChild(name2);

            //性别
            var sex1=document.createElement("td");
            var sex2=document.createTextNode(sex);
            sex1.appendChild(sex2);

            //年龄
            var age1=document.createElement("td");
            var age2=document.createTextNode(age);
            age1.appendChild(age2);

            //操作
            var handle1=document.createElement("td");
            var handle2="<button type=‘button‘ onclick=‘_delete(this)‘ class=‘red‘>删除</button>";
            handle2+="<button type=‘button‘ onclick=‘_compile(this)‘ class=‘blue‘>编辑</button>";
            handle1.innerHTML=handle2;

            //日期
            var day1=document.createElement("td");
            var day2=document.createTextNode(newDate());
            day1.appendChild(day2);

            tr.appendChild(name1);
            tr.appendChild(sex1);
            tr.appendChild(age1);
            tr.appendChild(handle1);
            tr.appendChild(day1);

            id("content").appendChild(tr);
            id("name").value=id("sex").value=id("age").value=null;
        }



        //确认提交
        id("submit_next").onclick=function(){

            flag.parentNode.previousSibling.previousSibling.previousSibling.innerHTML=id("name").value;
            flag.parentNode.previousSibling.previousSibling.innerHTML=id("sex").value;
            flag.parentNode.previousSibling.innerHTML=id("age").value;

            id("submit").style.display="inline";
            id("submit_next").style.display="none";
            id("name").value=id("age").value=id("sex").value=null;
        }
    }
    var flag=null;


    //删除
    function _delete(tst){
        id("content").removeChild(tst.parentNode.parentNode);
        id("name").value=id("sex").value=id("age").value=null;
    }

    //编辑
    function _compile(rst){
        flag=rst;
        id("name").value=rst.parentNode.previousSibling.previousSibling.previousSibling.innerHTML;
        id("sex").value=rst.parentNode.previousSibling.previousSibling.innerHTML;
        id("age").value=rst.parentNode.previousSibling.innerHTML;
        id("submit").style.display="none";
        id("submit_next").style.display="inline";
    }

    //时期
    function newDate(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        return year+"年"+month+"月"+day+"日"+hours+":"+minutes+":"+seconds;
    }
</script>
</body>
</html>
信息提交范本-javascript
标签：turn ack rip 日期 color 操作 var sheet load
原文地址：http://www.cnblogs.com/predictime/p/7636815.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行