<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 = "<div class='table_row'>"; tr = tr + "<div class='table_small'> <div class='table_cell'> <input type='text' name='txtCustomerID"+rows+"' id='txtCustomerID"+rows+"'> </div></div>"; tr = tr + "<div class='table_small'> <div class='table_cell'> <input type='text' name='txtName"+rows+"' id='txtName"+rows+"'> </div></div>"; tr = tr + "<div class='table_small'> <div class='table_cell'> <input type='text' name='txtEmail"+rows+"' id='txtEmail"+rows+"'> </div></div>"; tr = tr + "<div class='table_small'> <div class='table_cell'> <input type='text' name='txtCountryCode"+rows+"' id='txtCountryCode"+rows+"'> </div></div>"; tr = tr + "<div class='table_small'> <div class='table_cell'> <input type='text' name='txtBudget"+rows+"' id='txtBudget"+rows+"'> </div></div>"; tr = tr + "<div class='table_small'> <div class='table_cell'> <input type='text' name='txtUsed"+rows+"' id='txtUsed"+rows+"'> </div></div>"; tr = tr + "</div>"; $('#myTable > tbody:last').append(tr); $('#hdnCount').val(rows); rows = rows + 1; }); $("#deleteRows").click(function(){ if ($("#myTable tr").length != 1) { $("#myTable tr:last").remove(); } }); $("#clearRows").click(function(){ rows = 1; $('#hdnCount').val(rows); $('#myTable > tbody:last').empty(); // remove all }); $("#frmMain").submit(function() { var bFlag = true; $("table#myTable input[id*='txtCustomerID']").each(function (index) { var line = index + 1; var txtCustomerID = $("table#myTable input[id*='txtCustomerID']").eq(index); var txtName = $("table#myTable input[id*='txtName']").eq(index); var txtEmail = $("table#myTable input[id*='txtEmail']").eq(index); var txtCountryCode = $("table#myTable input[id*='txtCountryCode']").eq(index); var txtBudget = $("table#myTable input[id*='txtBudget']").eq(index); var txtUsed = $("table#myTable input[id*='txtUsed']").eq(index); if($(txtCustomerID).val() != "" || $(txtName).val() != "" || $(txtEmail).val() != "" || $(txtCountryCode).val() != "" || $(txtBudget).val() != "" || $(txtUsed).val() != "") { if($(txtCustomerID).val() == "") { alert('Please input CustomerID line...' + line); bFlag = false; } if($(txtName).val() == "") { alert('Please input Name line...' + line); bFlag = false; } if($(txtEmail).val() == "") { alert('Please input Email line...' + line); bFlag = false; } if($(txtCountryCode).val() == "") { alert('Please input CountryCode line...' + line); bFlag = false; } if($(txtBudget).val() == "") { alert('Please input Budget line...' + line); bFlag = false; } if($(txtUsed).val() == "") { alert('Please input Used line...' + line); bFlag = false; } } }); if(!bFlag) { return false; } return true; }); }); </script> <form action="page2.php" id="frmMain" name="frmMain" method="post"> <h1>jQuery Dynamic table input</h1> <div class="table table-striped" id="myTable"> <div class='theader' style="background: #3C8DBC; color: white;"> <div class='table_header' align="center">รายการ </div> <div class='table_header' align="center">รายละเอียด </div> <div class='table_header' align="center">ประเภท </div> <div class='table_header' align="center">ราคาก่อน VAT </div> <div class='table_header' align="center">VAT 7% </div> <div class='table_header' align="center">ราคารวม </div> </div><!-- theader --> </div><!-- table table-striped --> <br /> <input type="button" id="createRows" value="Add"> <input type="button" id="deleteRows" value="Del"> <input type="button" id="clearRows" value="Clear"> <center> <br> <input type="hidden" id="hdnCount" name="hdnCount"> <input type="submit" value="Submit"> </form>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง