First entry JavaScript knowledge point (vii)

Source: Internet
Author: User

Rewrite the previous student data with jquery

Html

<! DOCTYPE html>

Name:Age:Gender:Add

name Age Sex Operation

Js

$ (function () {var data; 1. Gets the data if (localstorage.data = = = undefined) {$.ajax ({URL: './...        /data/data.json ', type: ' Get ', success:function (datafromserver) {data = Datafromserver;        Localstorage.data = json.stringify (data);      Showtable ();  }    });    } else {data = Json.parse (Localstorage.data);  Showtable ();      }//Add Student $ (' #add '). On (' click ', function () {var stu = {name: $ (' #name '). Val (), Age: $ (' #age '). Val (),    Gender: $ (' #gender '). Val ()};    $ (' input '). Val (');    Data.push (Stu);    Localstorage.data = json.stringify (data);  Showtable ();  });    Delete $ (' #tbody '). On (' click ', '. Delete ', function () {var index = This.parentNode.parentNode.sectionRowIndex;    Delete the corresponding item in the data array Data.splice (index, 1);    Localstorage.data = json.stringify (data);  Showtable ();  });  Modify the name $ (' #tbody '). On (' click ', '. Name ', function () {Onchangebtnclick (this, 0, ' name ');  }); Modify the age of $ (' #tbody '). On (' click ', '. ', function () {Onchangebtnclick (this, 1, ' age ');  });    Click Modify XX button function Onchangebtnclick (btn, Tdindex, prop) {var $tr = $ (BTN). Parent (). parent ();    var $td = $tr. Children (). EQ (tdindex);    Console.log ($TD);    $td. html (' <input type= ' text "value=" ' + $td. Text () + ' "> ');    var $operateTd = $ (BTN). parent (); $operateTd. Empty (). Append ($ (' <button> OK </button> '). On (' click ', function () {var newvalue =        $td. Children (). EQ (0). Val ();        var index = $tr. Get (0). Sectionrowindex;        Console.log (newvalue, index);        Data[index][prop] = newvalue;        Localstorage.data = json.stringify (data);      Showtable (); }). Append ($ (' <button class= "Cancel > Cancel </button> ')}//Cancel Modify $ (' #tbody '). On (' click ', '. Cancel ', show  Table);    Displays table function Showtable () {$ (' #tbody '). empty ();      $.each (data, function (I, n) {//Console.log (i);      Console.log (n);      Console.log (this); Console.log (' ======== '); $ (' <tr></tr> '). Append ($ (' <td> ' + n.name + ' </td> ' + ' <td> ' + n.ag E + ' </td> ' + ' <td> ' + n.gender + ' </td> ' + ' <td><button class= ' delete ' > Delete </button><button class= "name" > Modify name </button><button class= "Age" > Modify ages </button></  Td> '). AppendTo ($ (' #tbody '))}); }});

jquery Write Carousel

$ (function () {$ (' #wrap '). Data (' index ', 0);    $ (' #nav '). On (' Click ', ' Li ', function () {//Clear auto-play Timer clearinterval (timer);    var = this;    var index = $ (this). index ();      Saves the index number of the picture currently being displayed to the additional data $ (' #wrap '). Data (' index ', index). Animate ({Left:index * ( -430)}, +, function () {      $ (' #nav Li '). Removeclass (' selected ');      $ (that). AddClass (' selected ');    Restart AutoPlay timer = setinterval (AutoPlay, 2000);  });  });  var timer = setinterval (AutoPlay, 2000);    function AutoPlay () {//Console.log (123);    Gets the current index var currentindex = $ (' #wrap '). Data (' index ');    The index var nextindex of the next sheet;    if (Currentindex = = = $ (' #wrap img '). length-1) {nextindex = 0;    } else {nextindex = currentindex + 1;    }//Console.log (Nextindex); $ (' #wrap '). Data (' index ', nextindex). Animate ({Left:nextindex * ( -430)}, p, function () {$ (' #nav Li '). Remo    Veclass (' selected '). EQ (nextindex). addclass (' selected ');  }); }});
Handlebars template engine
<! DOCTYPE html>

First-entry JavaScript knowledge point (vii)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.