<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function () { var rows = 1; $("#createRows").click(function () { var tr = "<tr>"; tr = tr + "<td><select type='text' name='txtName"+rows+"' id='txtName"+rows+"'><option>โปรดเลือก</option></select></td>"; tr = tr + "<td><select type='text' name='txtName"+rows+"' id='txtName"+rows+"'><option>โปรดเลือก</option></select></td>"; tr = tr + "<td><input type='text' name='txtName"+rows+"' id='txtName"+rows+"'</td>"; tr = tr + "<td><select type='text' name='txtName"+rows+"' id='txtName"+rows+"'><option>โปรดเลือก</option></select></td>"; tr = tr + "<td><select type='text' name='txtName"+rows+"' id='txtName"+rows+"'><option>โปรดเลือก</option></select></td>"; tr = tr + "<td><input type='text' name='txtName"+rows+"' id='txtName"+rows+"'</td>"; tr = tr + "</tr>"; $('#myTable > tbody:last').append(tr); $('#hdnCount').val(rows); rows = rows + 1; }); $("#deleteRows").click(function () { if ($("#myTable tr").length != 1) { $("#myTable tr:last").remove(); $('#hdnCount').val(rows); rows = rows - 1; } }); $("#clearRows").click(function () { $('#myTable > tbody:last').empty(); // remove all }); }); </script> <meta charset=utf-8 /> </head> <body> <center> <h1>jQuery Create table rows / tr / tbody / td</h1> <table width="600" border="1" id="myTable"> <!-- head table --> <thead> <tr> <td width="91"> <div align="center">แบรนด์ </div></td> <td width="98"> <div align="center">รุ่น </div></td> <td width="198"> <div align="center">สี </div></td> <td width="97"> <div align="center">ความยาว </div></td> <td width="59"> <div align="center">ประเภท </div></td> <td width="71"> <div align="center">จำนวน </div></td> </tr> </thead> <!-- body dynamic rows --> <tbody></tbody> </table> <br /> <input type="button" id="createRows" value="Add"> <input type="button" id="deleteRows" value="Del"> <input type="button" id="clearRows" value="Clear"> <input type="text" id="hdnCount" name="hdnCount" value='0' readonly/> </center> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง