JS dynamic table (add, delete rows)

JS achieve a form of additions and deletions function, add or remove one:
FIG achieve the following results:
1) add a row;
2) deleting rows;
Codes are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        a{
            text-decoration: none;
        }
        .one{
            margin: 0 auto;
            width: 1000px;
        }
        .btns {
            margin-bottom: 5px;
        }
        .btn {
            display: inline-block;
            padding: .3em 1.2em;
            border-radius: 3px;
            background-color: teal;
            color: #fff;
            cursor :pointer;
        }
        table.table {
            box-sizing: border-box;
            width: 100%;
            border-collapse: collapse;
        }
        table.table td ,
        table.table th {
            border: 1px solid #ccc;
            line-height: 2em;
            text-align: center;
        }
        .none {
            display: none;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="btns">
            <div class="btn" id="btn_add">添加</div>
            <div class="btn">批量导入</div>
            <div class="btn">批量删除</div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <</ID>= "80px"widthTHTH > 
                    < TH width = "100px" > class </ TH > 
                    < TH width = "220px" > Name </ TH > 
                    < TH width = "80px" > gender </ TH > 
                    < TH width = "80px" > Age </ TH > 
                    < TH > email </ TH > 
                    < TH > phone </ TH >
                    <th width="100px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="none" >
                    <td><input type="checkbox"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <a class="btn_del" href="javascript:void(0)">删除</a>
                        <a class="btn_upd" href="javascript:void(0)">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>

        btn_addvarget Id is btn_add elements and assign it to btn_add//
        = Document.getElementById ( " btn_add " ); 

        // Gets the label name for the first tag tbody, and assign it to tbody 
        var tbody = document.getElementsByTagName ( " tbody " ) [ 0 ]; 

        // tied for the delete button given event handler 
        tbody.onclick =  function (event) {
             // create a new trigger event = Dom element that triggered the event itself (ie, trigger events click event) 
            var target = event.target; 

            // === node name if the trigger event a (If clicking a tab) 
            IF (target.nodeName ===  " A " ) { 

                //If the class name === btn_del trigger event (If you click on class name === btn_del of a label) 
                IF (target.className ===  " btn_del " ) {
                     // remove the child (delete click event under tody parent parent of the node, the parent node is deleted clicks a label (td tag) of the parent node (tr tag) 
                    tbody.removeChild (target.parentNode.parentNode) 
                } 
                // If the trigger class name of the event === btn_upd (if click the class name === btn_upd of a label) 
                IF (target.className ===  " btn_upd " ) { 
                    Alert ( " modification " ); 
                } 
            } 
        } 

        // add button binding event handlers
        btn_add.onclick =  function (Event) { 

             // generates a tr, add new rows copied equal to hiding rows 
             var newTr = tbody.firstElementChild.cloneNode ( to true ); 

             // value of the newly added row 0- + 1 of the second random decimal between. 1 
             newTr.children [ 2 ] .innerHTML =  " <strong> " + Math.random () + " </ strong> " ; 

             // class name of the new line is added between the random 0-1 decimal 
             newTr.className = Math.random (); 

             // a tr added to the tbody 
             tbody.appendChild (newTr); 
        }; 
    </script>    
</body>
</html>
JS dynamic table (add, delete rows)

Guess you like
