jquery implements table additions and deletions

HTML code <! Doctype html>
CSS code. btn{    margin-top:20px;    margin-left: 400px;}. tab table{    line-height: 40px;    margin-left: 400px;     margin-top: 20px;    background-color: wheat;     text-align: center;    width: 600px;}. Tab table a{    text-decoration: none;}. tab table a:hover{    color:red;}. Hide{    display: none;}. shade{    position: fixed;    top: 0;     bottom: 0;    left: 0;    right: 0;     background-color: darkgray;    opacity: 0.4;}. add_form{    margin-left: 500px;    margin-top: 100px;    width: 460px;    height: 300px;     Position: absolute;}. edit_form{    margin-left: 500px;    margin-top: 100px;     width: 460px;    height: 300px;     Position: absolute;} jquery code/** * created by hyh on 2017/8/8. */$ (document). Ready (function () {    $ (document). On (' click ', '. One ', function () {       if ($ () ). Val ()  ==  "add") {           $ (". Shade"). Removeclass ("Hide");            $ (". Add_form"). Removeclass ("Hide");            $ (". Edit_form"). AddClass ("Hide");            $ (". btn"). AddClass ("HiDe "),            $ (". tab "). AddClass (" Hide ");        }       else if ($ (this). Val ()  ==   "Select All") {            $ (". CheckBox"). Prop (" Checked ", true);       }       else  if ($ (this). Val ()  ==  "Reverse selection") {           $ (". CheckBox "). each (function () {                $ (This). Prop ("Checked",  !$ (This). Prop ("checked"));            });       }        else{           $ (". CheckBox"). each (function () {                $ (This). Prop ("checked", false);            });        }   });    $ (document). On (' click ', '. Edit ', function (e) {        E.preventdefault ();        var inx = $ (this). Parent (). Parent ( ). index ();        // alert (Inx);        var empname=$ (This). Parent (). Parent (). Children (). EQ (1). Text ();        var empage=$ (This). Parent (). Parent (). Children (). EQ (2). Text ();        var emp_position=$ (This). Parent (). Parent (). Children (). EQ (3). Text ();        $ ("#empname1"). Prop ("value", EmpName),        $ ("#empage1"). Prop ( "Value", empage);        $ ("#emp_position1"). Prop ("value", emp_position);        $ (". btn"). AddClass ("Hide"),        $ (". tab"). AddClass ("Hide");        $ (". Add_form"). AddClass ("Hide");        $ (". Shade"). Removeclass ("Hide");        $ (". Edit_form"). Removeclass (" Hide ");        $ (" #save1 "). Click (function () {             // alert (INX);            empname = $ ("#empname1"). Val ();            empage = $ ("#empage1"). Val ();            emp_position = $ ("#emp_position1"). Val ();            $ ("table"). Children (). Children (). EQ (inx). Children (). EQ (1). Text (EmpName);            $ ("table"). Children (). Children (). EQ (inx). Children (). EQ (2). Text (empage);            $ ("table"). Children (). Children (). EQ (inx). Children ( ). EQ (3). Text (emp_position);            $ (". btn"). Removeclass ("Hide");            $ (". tab"). RemoveClass (" Hide "),            $ (". Shade "). AddClass (" Hide ");            $ (". Edit_form"). AddClass ("Hide");            $ (". Add_form"). AddClass ("Hide");        });    });    $ ("#save"). Click (function () {                var empname = $ ("#empname"). Val ();                var empage = $ ("#empage "). Val ();               var  emp_position = $ ("#emp_position"). Val ();                var htmlstr= ' <tr> ' +                  ' <td><input type= ' checkbox " class=" checkbox "></td> ' +                  ' <td> ' +empname+ ' </td> ' +                  ' <td> ' +empage+ ' </td> ' +                  ' <td> ' +emp_position+ ' </td> ' +                  ' <td><a class= ' edit '  href= ' # ' > Edit </a></td> ' +                  ' <td><a class= "delete"  href= "#" > Delete </a></td> ' +              ' </tr> ';                 $ ("#empname"). Val (');                 $ ("#empage"). Val (');                 $ ("#emp_position"). Val (');                $ ("Table"). Append ( HTMLSTR);                $ (". btn"). Removeclass ("Hide");                $ (". tab"). RemoveClass ("Hide");                $ (". Add_form"). AddClass ("Hide");                $ (" . Edit_form "). AddClass (" Hide ");                $ (". Shade"). AddClass ("Hide");    });    $ (document). On (' click ', '. Delete ', function (e) {       e.preventdefault ();        var inx = $ (This). Parent (). Parent (). Index ();        // alert (Inx);        $ (this). Parent (). Parent (). remove (); (&NBSP;&NBSP;&NBSP;});});

This article is from the "Linux Technology" blog, so be sure to keep this source http://haoyonghui.blog.51cto.com/4278020/1954584
jquery implements table additions and deletions