<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="per"><!-- InstanceBeginEditable name="content" --> <script src="js/jquery.js"></script> <div class="container"> <!-- Portfolio Item Heading --> <table id="myTbl" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top"> <form id="form1" name="form1" method="post" action="lo.php"> <div class="firstTr" > <h3><font color="#09ba32">ประเภทอาหาร</font></h3> <table class="table table-hover" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr > <td><input type="checkbox" name="res[]" id="res1[]" value="ก๋วยเตี๋ยว"/> <span class="style1"><img src="images/category/ก๋วยเตี๋ยว.png" width="25" height="25">ก๋วยเตี๋ยว</span></td> <td><input type="checkbox" name="res[]" id="res1[]" value="สุกี้ชาบู"/> <span class="style1"><img src="images/category/สุกี้ชาบู.png" width="25" height="25">สุกี้ ชาบู</span></td> <td><input type="checkbox" name="res[]" id="res1[]" value="ร้านกาแฟ"/> <span class="style1"><img src="images/category/ร้านกาแฟ.png" width="25" height="25">ร้านกาแฟ</span></td> <td><input type="checkbox" name="res[]" id="res1[]" value="หมูกะทะ"/> <span class="style1"><img src="images/category/หมูกะทะ.png" width="25" height="25">หมูกะทะ</span></td> <td><input type="checkbox" name="res[]" id="res1[]" value="สเต็ก"/> <span class="style1"><img src="images/category/สเต็ก.png" width="25" height="25">สเต็ก</span></td> <td><input type="checkbox" name="res[]" id="res1[]" value="อาหารทะเล"/> <span class="style1"><img src="images/category/อาหารทะเล.png" width="25" height="25">อาหารทะเล</span></td> <td><input type="checkbox" name="res[]" id="res1[]" value="เบเกอรี่เค้ก"/> <span class="style1"><img src="images/category/เบเกอรี่เค้ก.png" width="25" height="25">เบเกอรี่ เค้ก</span></td> </tr> </table> </div> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <button class="btn btn-success" id="addRow" type="button">เพิ่มผู้ใช้</button> <button class="btn btn-success" id="removeRow" type="button">ลบผู้ใช้คนล่าสุด</button> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" <tr> <td> <div align="center"><input class="btn btn-success" type="submit" name="Submit" id="Submit" value="ค้นหาข้อมูล" /></td></div> </tr> </table> </form> <br /> </div> <script type="text/javascript"> $(function(){ $("#addRow").click(function(){ // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input $(".firstTr:eq(0)").clone(true) .find("input").attr("value","").end(true) .find("select").attr("value","").end(true) .appendTo($("#myTbl")); }); $("#removeRow").click(function(){ // // ส่วนสำหรับการลบ if($("#myTbl div").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ $("#myTbl div:last").remove(); // ลบรายการสุดท้าย }else{ // เหลือ 1 รายการลบไม่ได้ alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ"); } }); }); </script> </body>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง