学习jquery的例子todos.

来源：互联网发布：梁朝伟董洁知乎编辑：程序博客网时间：2024/05/29 08:13
jquery example todos,在线演示点击打开链接
<html lang="en"><head>  <meta charset="utf-8"></head><body>  <div id="todoapp">    <header>      <h1>Todos</h1>      <input id="new-todo" type="text" placeholder="What needs to be done?">      <button id="button_add" type="button">add</button>      <button id="button_clear" type="button">clear</button>    </header>    <section id="main">      <table id="todo-list"></table>    </section>  </div>  <script src="jquery.js"></script>  <script type="text/javascript">    $(function(){        var todos=["a","b","c"];        console.log("document ready");        function clearall(){            //$("#one").remove();            $("[one]").remove();        }        function button_edit_click(event){            console.log("button_edit clicked");                    }        function button_remove_click(event){            console.log("button_remove clicked");            console.log(event.data);            console.log(event.data.row);            event.data.row.remove();            rowid=event.data.rowid;            todos[rowid]=undefined;//=todos.slice(rowid);        }                function showall(){            clearall();            var todolist=$("#todo-list");            for(var i in todos){                if(todos[i]){                    var one = $('<tr one="true"></tr>');                    var rowid = $('<td>'+i+'</td>');                    var newEl = $('<td>'+todos[i]+'</td>');                    var btn_remove = $('<td><button type="button">remove</button></td>');                    //btn.click(button_remove_click);                    btn_remove.bind("click", { row:one,rowid:i},button_remove_click );                    //var btnedit = $('<td><button type="button">edit</button></td>');                    //btnedit.click(button_edit_click);                    one.append(rowid);                    one.append(newEl);                     //one.append(btnedit);                    one.append(btn_remove);                    todolist.append(one);                }            }                    }        function button_add_click(){            console.log("button_add clicked");            var newtodo=$("#new-todo");            todos.push(newtodo[0].value);            showall();        }        function button_clear_click(){            todos=[];            clearall();        }                $("#button_add").click(button_add_click);        $("#button_clear").click(button_clear_click);        showall();    });  </script>  </body></html>
0 0
学习jquery的 例子todos.

学习jquery的例子todos.
