jQuery to do list · 前端开发

jQuery to do list: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery to do list</title> <style> *{ margin: 0; padding: 0; } div input{ margin-left: 40px; } table{ margin-top: 40px; border-collapse: collapse; } td{ width: 150px; height: 40px; border: 1px solid #000; text-align: center; } </style> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> $(function () { $("#btn").click(function () { var a=$("div input").eq(0).val(); var b=$("div input").eq(1).val(); var c=$("div input").eq(2).val(); var text="<tr><td><input type='checkbox' class='checkItem'></td><td>"+a+"</td>+<td>"+b+"</td>+<td>"+c+"</td><td><button class='sc'>删除</button></td></tr>" $("tbody").append(text); $(".sc").click(function () { $(this).parents("tr").remove(); }); }); $("#checkAll").click(function(){ if($(this).is(":checked")){ $(".checkItem").prop("checked",true); }else{ $(".checkItem").prop("checked",false); } }) }) </script> </head> <body> <div> <input type="text">目標 <input type="text">開始 <input type="text">結束 <button id="btn">添加</button> </div> <table> <thead><tr><td><input type="checkbox" id="checkAll"> </td> <td>目標</td> <td>開始</td> <td>結束</td> <td>操作</td> </tr> </thead> <tbody> </tbody> </table> </body> </html> ```