<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> </style> </head> <body> <input type="text" id="name" οnblur="yz()"> <p></p> <h2></h2> <h3></h3> <input type="radio" value="男" name="sex">男 <input type="radio" value="女" name="sex">女<br> <input type="checkbox" value="項目" name="message">項目 <input type="checkbox" value="文檔" name="message">文檔 <input type="checkbox" value="物品" name="message">物品 <input type="checkbox" value="智能" name="message">智能 <button>zhu</button> <table border="1" cellspacing="0"> <tr id="t"> <td><input type="checkbox" id="quan">全選</td> <td>性別</td> <td>需要</td> <td>操作</td> </tr> </table> <script src="JQ/Jquery/jquery-1.12.0.min.js"></script> <script> function yz() { var name=$("#name").val(); if(name.length<10) { alert(0); } } $("button").click(function () { var name=$("#name").val(); var s=name.substr(name.length-4,name.length); if(name.indexOf("@")>=0&&s==".com"){ $("p").text("√"); }else{ $("p").text("×"); } var val=$(":input[name='sex']:checked").val(); var valbox=$(":input:checkbox[name='message']:checked").map(function (index,el) { return $(el).val(); }).get().join(","); $("h2").text(val); $("h3").text(valbox); $("#t").after("<tr><td><input type='checkbox' class='dan'></td><td>"+val+"</td><td>"+valbox+"</td><td><button class='de'>刪除</button></td></tr>"); $(".de").click(function () { $(this).parent().parent().remove(); }); $("#quan").click(function () { if($("#quan").is(":checked")) { $(".dan").prop("checked",true); }else { $(".dan").prop("checked",false); } }); }); </script> </body>
</html>
angularJS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ text-align: center; } ul{ margin: 10px auto; list-style: none; width: 600px; height: 600px; border: 1px solid #000000; text-align: center; } ul li{ width: 120px; height: 60px; margin: 20px; border: 1px solid #000000; line-height: 60px; float: left; } span{ padding-left: 10px; } </style> <script src="jq/jquery-3.2.1.min.js"></script> </head> <body> <div class="box"> <ul></ul> </div> <button>語文</button> <button>數學</button> <button>英語</button> <button>政治</button> <button>歷史</button> <button>體育</button> <button>地理</button> <script> var buts=document.getElementsByTagName("button"); for(var i=0;i<buts.length;i++){ buts[i].onclick=function () { var li="<li>"+$(this).html()+"<span>✘</span></li>"; var lis=document.getElementsByTagName("li"); var is=false; for(var i=0;i<lis.length;i++) { is=false; console.log("<li>"+lis[i].innerHTML+"</li>"+"-----"); console.log(li+"====="); if(li=="<li>"+lis[i].innerHTML+"</li>") { console.log("進來了"); is=true; break; }else { is=false } } if(is==false) { $("ul").append(li); } var sp=document.getElementsByTagName("span"); for(var i=0;i<sp.length;i++) { sp[i].onclick = function () { $(this).parent().remove(); } } } } </script> </body> </html>
