<div class="control-group"> <p></p> <div style="float:left"> </div> <div id="history_work_group"> <div class="his_w_li"> <span class="number">1</span> <input type="text" id="point" name="point" placeholder="ใส่รายละเอียด" value="{{ old('cashback') }}" class="span2.3"> <input type="text" id="point1" name="numback2" value="1" style="width:20px;"> <input type="button" name="point2" id="add_history_w" value="เพิ่มข้อมูล"> <input type="button" id="btn-del2" value="ลบข้อมูล" /><p></p> </div> </div> </div>
<script type="text/javascript"> var max = 5; $(function() { // ประวัติการทำงาน var scntDiv = $('#history_work_group'); var i = $('#history_work_group .his_w_li').length + 1; $('#add_history_w').on('click', function() { if(i == max){ $(this).addClass( "disabled" ); } if (i <= max) { $('<div class="his_w_li"><input type="text" name="cash1"/><span class="number">'+ i +'</span><input type="text" name="numcash" value=" ' + i + ' " style="width:20px;" /><button class="remHw btn btn-sm btn-outline-dark ">{{__('ลบ')}}</button></div>').appendTo(scntDiv); if(i == max){ $(this).addClass( "disabled" ); } i++; return false; } }); $('#history_work_group').on('click','.remHw' ,function() { if( i > 2 ) { $(this).parents('.his_w_li').remove(); i--; $('#add_history_w').removeClass( "disabled" ); } var renum = 1; $("#history_work_group .his_w_li span.number").each(function() { $(this).text(renum); renum++; }); //$('#add_history_w').show(); return false; });
<div id="tmp" style="display: none"> <div mx_class="his_w_li"> <input type="text" mx_name="cash[{number}]" mx_id="unix_{number}" > <span mx_class="number">{number}</span> <input type="text" mx_name="numcash" value="{number}" style="width:20px;" /> <button mx_class="remHw btn btn-sm btn-outline-dark ">ลบ</button> </div> </div> <script type="text/javascript"> var max = 5 // จำนวน object ที่ต้องการแสดง , input_unique // สำหรับ สร้าง index ต่อเนื่อง , scntDiv = '#history_work_group'; // อ้างอิง div ที่ใช้งาน function chkCount(){ // ตรวจสอบจำนวน object ทำเป็น function if( $(scntDiv).find('.his_w_li').length<max){ $('#add_history_w').removeClass( "disabled" );} // activate ปุ่มเพิ่มรายการ else{ $('#add_history_w').addClass( "disabled" );} // deactivate ปุ่มเพิ่มรายการ } } $(document).ready(()=>{ // เมื่อ document load พร้อมทำงาน // ประวัติการทำงาน input_unique = $(scntDiv).find('.his_w_li').length + 1; // กำหนดค่าเริ่มต้น chkCount(); $('#add_history_w').on('click', function() { var ln = $(scntDiv).find('.his_w_li').length; var div = $('#tmp').html() // อ่านค่าจาก temp div .replace(/\{number\}/g,input_unique) // แทนค่าตัวเลข .replace(/mx_/g,''); // เปลี่ยน attribute เป็น class/name/id เพื่อไม่มใช้ซ้ำซ้อน ในการเรียกใช้ $(div).appendTo(scntDiv); input_unique++; // เพิ่ม ค่า index chkCount(); // เพิ่มรายการ ตรวจสอบจำนวน object }); $(scntDiv).on('click','.remHw' ,function() { if( $(scntDiv).find('.his_w_li').length <2 ) { // ไม่ให้ลบ ถ้าจำนวนน้อยกว่ากำหนด alert('ไม่สามารถลบได้<br>ต้องมีอย่างน้อย 1 บันทัด'); return; } $(this).parent().remove(); chkCount(); // ลบรายการ ตรวจสอบจำนวน object }); }); </script>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง