<html> <head> <title>TESTING JQUERY</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> div{ padding:8px; } </style> </head> <body> <h1>jQuery add / remove textbox example</h1> <script type="text/javascript"> $(document).ready(function(){ var counter = 2; $("#addhear").click(function () { if(counter>10){ alert("ห้ามเกิน 10 เฟ้ย"); return false; } var newTBDiv = $(document.createElement('div')) .attr("id", 'TBDiv' + counter); newTBDiv.after().html('<label>อันที่ #'+ counter + ' : </label>' + '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >'); newTBDiv.appendTo("#GroupBox"); counter++; }); $("#removehear").click(function () { if(counter==1){ alert("ไม่เหลืออะไรให้แกลบแย้วเฟ้ยยยยย"); return false; } counter--; $("#TBDiv" + counter).remove(); }); $("#getvaluehear").click(function () { var msg = ''; for(i=1; i<counter; i++){ msg += "\n อันที่ #" + i + " : " + $('#textbox' + i).val(); } alert(msg); }); }); </script> </head> <body> <div id='GroupBox'> <div id="TBDiv1"> <label>อันที่ #1 : </label> <input type='textbox' id='textbox1' > </div> </div> <input type='button' value=' เพิ่มใหม่ ' id='addhear'> <input type='button' value=' ลบทิ้ง ' id='removehear'> <input type='button' value=' ดึงค่า ' id='getvaluehear'> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง