JavaScript DOM exercise (dynamic table add) December 25,2019

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        input{
            text-align: center;
        }
        th,td{
            text-align: center;
            border: 1px solid;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
    </style>
</head>
<body>
    <div><input type="text" id = "id" placeholder="请输入编号">
        <input type="text"the above mentioned id = "name" placeholder = "Please enter the name" > 
        < the INPUT of the type = "text" the above mentioned id = "Gender" placeholder = "Please enter the sex" > 
        < the INPUT of the type = "the Button"   value = "add" the above mentioned id = "btn_add" > 
    </ div > 

    < the table > 
        < Caption > student information table </ Caption > 
        < TR > 
            < TH > ID </ TH > 
            < TH > Name </th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张楚岚</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">> </A</Deletetd>
        </tr>
        <tr>
            <td>2</td>
            <td>冯宝宝</td>
            <td>女</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

    <script>
            /*
                Analysis: 
                    1. Add: 
                        1. Add the button binding to the click event 
                        2. Obtain the contents of the text box 
                        3. Create td, td setting text to the text box contents. 
                        4. Create tr 
                        5. The td be added to the tr 
                        6. Get table, tr added to the table 
                    2. Delete: 
                        1. Determine which click a hyperlink 
                        <a href = "javascript: void (0);" onclick = "delTr (this); "> delete </a> 
                        how 2. delete? 
                        removeChild (): Removes the child node via the parent node 
            * / 
            // to click the Add button binding event 1. 
            / * 
        document.getElementById ( "btn_add") onclick = function () {.
            2 // Get the text box contents. 
            var td_gender = document.createElement ( "td");
            document.getElementById ID = var ( "ID") value;. 
            var name = document.getElementById ( "name") value;. 
            . Gender var = document.getElementById ( "Gender") value; 
            .. 3 // Create a set td td text content of the text box 
            var td_id = document.createElement ( "td" ); // Create element node 
            var text_id = document.createTextNode (id); // Create a text node with id value 
            td_id.appendChild (text_id) ; // add to the value of the id td node 

            var td_name = document.createElement ( "td"); 
            var = TEXT_NAME document.createTextNode (name); 
            td_name.appendChild (TEXT_NAME); 

            var = text_gender document.createTextNode (Gender); 
            td_gender.appendChild (text_gender);

            var td_a = document.createElement("td");
            var element_a = document.createElement("a");
            element_a.setAttribute("href","javascript:void(0);");
            element_a.setAttribute("onclick","delTr(this);");
            var textNode = document.createTextNode("删除");
            element_a.appendChild(textNode);
            td_a.appendChild(element_a);
            //4.创建tr
            var tr = document.createElement("tr");
            //5.将td添加到tr中
            tr.appendChild(td_id);
            tr.appendChild(td_name);
            tr.appendChild(td_gender);
            tr.appendChild (td_a); 
            .. 6 // acquisition table, the table to add tr 
            var = document.getElementsByTagName table ( "table") [0]; 
            table.appendChild (tr); 
        } 
* / 

            // use Inner 
            Document .getElementById ( " btn_add " ) .onclick = function () {
                 // 2. Get the text box contents 
                var ID = document.getElementById ( " ID " ) .Value;
                 var name = document.getElementById ( " name " ) .Value;
                var gender = document.getElementById("gender").value;

                var table = document.getElementsByTagName("table")[0];
                table.innerHTML +="<tr>\n" +
                    "<td>"+id+"</td>\n" +
                    "<td>"+name+"</td>\n" +
                    "<td>"+gender+"</td>\n" +
                    " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
                    "</ TR> " ; 
            } 

            // delete method 
            function delTr (obj) {
                 var Table = obj.parentNode.parentNode.parentNode; // Get parent node 
                var TR = obj.parentNode.parentNode; 
                table.removeChild (TR); 
            } 
    </ Script > 
</ body > 
</ HTML >
JavaScript DOM exercise (dynamic table add) December 25,2019

Guess you like
