案例——刪除添加記錄

時間 2019-12-17
標籤案例刪除添加記錄简体版
原文原文鏈接
添加刪除記錄

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .formDiv {
                width: 300px;
                border: 1px solid #000000;
                margin-top: 50px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                // 點擊超連接之後，刪除一個員工的信息？
                // 獲取超連接
                var allA = document.getElementsByTagName("a");

                // 爲每一個超連接綁定一個單擊相應函數？
                for (var i = 0; i < allA.length; i++) {
                    allA[i].onclick = function() {
                        /*
                            點擊超連接之後，超連接會跳轉界面，這個是超連接的默認行爲
                            咱們不但願出現默認行爲，能夠經過在響應函數的最後return false來取消默認行爲
                        
                            */
                        // 獲取tr
                        var tr = this.parentNode.parentNode;
                        // 提示框
                        /*
                        confirm()用於彈出一個帶有確認和取消按鈕的提示框
                        須要一個字符串做爲參數，該字符串做爲提示文字顯示
                        若是用戶點擊確認則返回true，若是點擊取消則返回false
                        */
                        var name = "確認刪除" + tr.getElementsByTagName("td")[0].innerHTML;
                        var flag = confirm(name);
                        // 刪除tr
                        if (flag) {
                            tr.parentNode.removeChild(tr);
                        }

                        return false;
                    };
                }
                /*
                添加員工的功能
                點擊addEmpButton按鈕之後，將員工信息填入表格
                */
                var addEmpButton = document.getElementById("addEmpButton");
                addEmpButton.onclick = function() {
                    // 獲取empName內容
                    var name = document.getElementById("empName").value;
                    // 獲取employeeTable表格
                    var employeeTable = document.getElementById("employeeTable");
                    // 建立tr子節點
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    td.innerHTML = name;
                    tr.appendChild(td)
                    // employeeTable.appendChild(tr);

                    var email = document.getElementById("email").value;
                    var td1 = document.createElement("td");
                    td1.innerHTML = email;
                    tr.appendChild(td1);

                    var salary = document.getElementById("salary").value;
                    var td2 = document.createElement("td");
                    td2.innerHTML = salary;
                    tr.appendChild(td2);

                    // var salary=document.getElementById("salary").value;
                    var td3 = document.createElement("td");
                    // td3.innerHTML="<a href="#">Delete</a>";
                    var a = document.createElement("a");

                    a.href = "#";

                    a.innerHTML = "Delete";
                    
                    a.onclick=function(){
                        /*
                            點擊超連接之後，超連接會跳轉界面，這個是超連接的默認行爲
                            咱們不但願出現默認行爲，能夠經過在響應函數的最後return false來取消默認行爲
                        
                            */
                        // 獲取tr
                        var tr = this.parentNode.parentNode;
                        // 提示框
                        /*
                        confirm()用於彈出一個帶有確認和取消按鈕的提示框
                        須要一個字符串做爲參數，該字符串做爲提示文字顯示
                        若是用戶點擊確認則返回true，若是點擊取消則返回false
                        */
                        var name = "確認刪除" + tr.getElementsByTagName("td")[0].innerHTML;
                        var flag = confirm(name);
                        // 刪除tr
                        if (flag) {
                            tr.parentNode.removeChild(tr);
                        }
                        
                        return false;
                    }
                    td3.appendChild(a);
                    tr.appendChild(td3);

                    var tbody = employeeTable.getElementsByTagName("tbody")[0];
                    tbody.appendChild(tr);



                }

            }
        </script>
    </head>
    <body>
        <table id="employeeTable" border="1" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>Tom@tom.com</td>
                <td>5000</td>
                <td><a href="#">Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>Jerry@sohu.com</td>
                <td>8000</td>
                <td><a href="#">Delete</a></td>
            </tr>
        </table>
        <div class="formDiv">
            <h4>添加新員工</h4>
            <table>
                <tr>
                    <td class="word">name:</td>
                    <td class="inp">
                        <input type="text" name="empName" id="empName" value="" />
                    </td>
                </tr>
                <tr>
                    <td class="word">email:</td>
                    <td class="inp"><input type="text" name="email" id="email" value="" /></td>
                </tr>
                <tr>
                    <td class="word">salary:</td>
                    <td class="inp"><input type="text" name="salary" id="salary" value="" /></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button id="addEmpButton" value="abc">Submit</button>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。