<script language="javascript"> function CreateNewRow(){ var intLine = parseInt(document.frmMain.hdnMaxLine.value); intLine++; var theTable = document.all.tbExp var newRow = theTable.insertRow(theTable.rows.length) newRow.id = newRow.uniqueID var newCell //*** Column 1 ***// newCell = newRow.insertCell(0); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><input type='text' size='5' name='column1_"+intLine+"' id='column1_"+intLine+"' value='' class='form-control'></center>"; //*** Column 2 ***// newCell = newRow.insertCell(1); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><input type='text' size='5' name='column2_"+intLine+"' id='column2_"+intLine+"' value='' class='form-control'></center>"; //*** Column 3 ***// newCell = newRow.insertCell(2); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><input type='text' size='5' name='column3_"+intLine+"' id='column3_"+intLine+"' value='' class='form-control'></center>"; //*** Column 4 ***// newCell = newRow.insertCell(3); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><input type='text' size='5' name='column4_"+intLine+"' id='column4_"+intLine+"' value='' class='form-control'></center>"; //*** Column 5 ***// newCell = newRow.insertCell(4); newCell.id = newCell.uniqueID; newCell.setAttribute("className", "css-name"); newCell.innerHTML = "<center><input type='text' size='5' name='column5_"+intLine+"' id='column5_"+intLine+"' value='' class='form-control'></center>"; document.frmMain.hdnMaxLine.value = intLine; } function GenerateRow(){ var intRows = parseInt(document.frmMain.txtCount.value); for(i=0;i<intRows;i++){ CreateNewRow(); } } </script> <body> <form name="frmMain" method="post"> <input type="hidden" name="hdnMaxLine" value="0"> <p>Number of Activities = <input type="text" name="txtCount" value="" size="5" onkeyup="GenerateRow();"></p><br> <table class="table table-striped" border='0'> <thead bgcolor="#00CCFF"> <tr> <td><div align="center">Column 1 </div></td> <td><div align="center">Column 2 </div></td> <td><div align="center">Column 3 </div></td> <td><div align="center">Column 4 </div></td> <td><div align="center">Column 5 </div></td> </tr> </thead> <tbody id="tbExp"></tbody> </table> <input value="Next >>" type="button"> </form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ $('#btnPluz').click(function(){ //เมื่อคลิกปุ่ม เพิ่ม $("#tbody>tr").remove(); // ใช้ # เป็นการอ้าง id จากนั้น ลบ tr ทั้งหมดที่อยู่ใน id=tbody var num=parseInt($('#number').val())+1; //รับค่าตัวเลข for(var i=1; i<num ; i++){ //นำมาวนลูป //alert(i); $('#tbody').append("<tr id='tr"+i+"' rel='"+i+"'><td> ลำดับที่ <span>"+i+"</span><input type='text' name='name[]'> </td></tr>"); //สร้าง tr และอื่น ๆ ที่ต้องการ ต.ย.สร้าง input แบบ array } }); }); </script> <table> <tr> <td> <input type="number" id="number" value="1" size="5"> <button type="button" id="btnPluz" >เพิ่ม</button> </td> </tr> <tbody id="tbody"> <!-- tr จะถูกสร้างลงตรงนี้ --> </tbody> </table>
<script> $(function(){ $('#btnPluz').click(function(){ //เมื่อคลิกปุ่ม เพิ่ม $("#tbody>tr").remove(); // ใช้ # เป็นการอ้าง id จากนั้น ลบ tr ทั้งหมดที่อยู่ใน id=tbody var num=parseInt($('#number').val())+1; //รับค่าตัวเลข for(var i=1; i<num ; i++){ //นำมาวนลูป //alert(i); $('#tbody') .append( "<tr id='tr"+i+"'><td>"+i+"</td><td><input type='text' name='col1_"+i+"'></td><td><input type='text' name='col2_"+i+"'></td><td><input type='text' name='col3_"+i+"'></td><td><input type='text' name='col4_"+i+"'></td><td><input type='text' name='col5_"+i+"'></td></tr>"); //สร้าง tr และอื่น ๆ ที่ต้องการ ต.ย.สร้าง input แบบ array } }); }); </script> <p>Number of Activities = <input type="text" id="number" value="0" size="5"> <button type="button" id="btnPluz" >Add</button></p> <table class="table table-striped" border='0'> <thead bgcolor="#00CCFF" align="center"> <tr> <td>CusID </td> <td>Column 1 </td> <td>Column 2 </td> <td>Column 3 </td> <td>Column 4 </td> <td>Column 5 </td> </tr> </thead> <tbody id="tbody" align="center"> <!-- tr จะถูกสร้างลงตรงนี้ --> </tbody> </table>
<script> $(function(){ $('#number').keyup(function(){ //เมื่อคลิกปุ่ม เพิ่ม $("#tbody>tr").remove(); // ใช้ # เป็นการอ้าง id จากนั้น ลบ tr ทั้งหมดที่อยู่ใน id=tbody var num=parseInt($('#number').val())+1; //รับค่าตัวเลข for(var i=1; i<num ; i++){ //นำมาวนลูป //alert(i); $('#tbody') .append( "<tr id='tr"+i+"'><td>"+i+"</td><td><input type='text' name='col1_"+i+"'></td><td><input type='text' name='col2_"+i+"'></td><td><input type='text' name='col3_"+i+"'></td><td><input type='text' name='col4_"+i+"'></td><td><input type='text' name='col5_"+i+"'></td></tr>"); //สร้าง tr และอื่น ๆ ที่ต้องการ ต.ย.สร้าง input แบบ array } }); }); </script> <p>Number of Activities = <input type="text" id="number" value="0" size="5"> <table class="table table-striped" border='0'> <thead bgcolor="#00CCFF" align="center"> <tr> <td>CusID </td> <td>Column 1 </td> <td>Column 2 </td> <td>Column 3 </td> <td>Column 4 </td> <td>Column 5 </td> </tr> </thead> <tbody id="tbody" align="center"> <!-- tr จะถูกสร้างลงตรงนี้ --> </tbody> </table>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง