19.综合案例3

作者: 若愚同学 | 来源:发表于2018-06-12 22:13 被阅读0次

19.综合案例3
综合案例
方法综合案例
综合案例展示
方法综合案例
javaWeb综合案例
OpenGL综合案例
OpenGL 综合案例
OpenGL 综合案例
OpenGL综合案例

HTML:

<body>
    <form name="userForm">
        <center>
            用户录入<br/>
            用户名:<input id="username" name="username" type="text" size=15/>
            E-mail:<input  id="email" name="email" type="text"  size=15/>
            电话:<input id="tel" name="tel" type="text" size=15/>
            <input type="button" value="添加" id="btn_submit"/>
            <input type="button" value="删除所有" id="btn_removeAll"/>
        </center>
    </form>
    <hr/>
    <table border="1" align="center" cellpadding=0 cellspacing=0 width=400> 
        <thead>
            <tr>
                <th>用户名</th>
                <th>E-mail</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="userTbody">
            <tr id="0001">
                <td>张无忌</td>
                <td>wujizhang@163.com</td>
                <td>18212345678</td>
                <td><a href="javascript:delRow('0001')">删除</a></td>
            </tr>
        </tbody>
    </table>
</body>

JS:

window.onload = function(){
    
    //找到添加按钮
    var btn = document.getElementById("btn_submit");
    btn.onclick = function(){
        //获取三个输入框中的值
        var username = document.getElementById("username");
        var email = document.getElementById("email");
        var tel = document.getElementById("tel");
        
        //获取当前系统时间
        var time = new Date().getTime();
        //创建一个tr
        var tr = document.createElement("tr");
        tr.setAttribute("id", time);
        
        //创建四个td
        var td1 = document.createElement("td");
        td1.innerText = username.value;
        var td2 = document.createElement("td");
        td2.innerText = email.value;
        var td3 = document.createElement("td");
        td3.innerText = tel.value;
        var td4 = document.createElement("td");
        td4.innerHTML = "<a href='javascript:delRow(\""+time+"\")'>删除</a>";
        
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        
        //找到tablebody
        var body = document.getElementById("userTbody");
        body.appendChild(tr);
    };
    
    //找到删除所有按钮
    var btnAll = document.getElementById("btn_removeAll");
    btnAll.onclick = function(){
        var body = document.getElementById("userTbody");
        body.innerHTML = "";//直接替换body里面的内容
    };
};

//根据id删除tr
function delRow(id){
    var tr = document.getElementById(id);
    tr.parentNode.removeChild(tr);
}