Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 107,997

HOME > PHP > PHP Forum > สอบถามปัญหาการเรียงลำดับให้กับตารางโดยการเพิ่มแบบ clone หลายแถว



 

สอบถามปัญหาการเรียงลำดับให้กับตารางโดยการเพิ่มแบบ clone หลายแถว

 



Topic : 132051



โพสกระทู้ ( 59 )
บทความ ( 0 )



สถานะออฟไลน์




ได้ประยกต์จาก 2 เว็บนี้
https://www.ninenik.com/forum_view_1145_1.html
https://www.thaicreate.com/php/forum/106472.html

ตัวอย่าง
http://jsfiddle.net/HpwZ2/41/

รันลำดับไม่ตรง


Code (PHP)
<div class="form-group">
                <table class="table table-condensed">
                <thead>
                <tr>
                    <th>#</th>
                    <th>นำหน้า</th>
                    <th>ชื่อ</th>
                    <th>นามสกุล</th>
                </tr>
                </thead>
                <tbody class="place-datarow">
                <tr class="datarow" >
                    <th scope="row"><div class="active" id=number><span>1</span></div></th>
                    <td>
                        <select name="title[]" class="form-control">
                            <option value="">คำนำหน้า</option>
                            <option value="นาย">นาย</option>
                            <option value="นาง">นาง</option>                                       
                    </td>
                    <td>
                        <input type="text" class="form-control" name="firstname[]" >                  
                    </td>
                    <td>
                        <input type="text" class="form-control" name="lastname[]" >
                    </td>
                   
                </tr>
                </tbody>
        
                </table>
                <br>
                <table class="table">
                    <tr>
                        <td width="50" class="tex-center">
                        <button id="addRow" type="button" class="btn btn-info">+</button>   
                        </td>
                        <td width="50" class="tex-center">
                        <button id="removeRow" type="button" class="btn btn-danger">-</button>      
                        </td>
                        <td class="text-right">
                        <button type="submit" class="btn btn-success">Submit</button>
                            
                        </td>
                    </tr>
                </table>
                 <input type="hiden" id="number" value="0">
                </div><!--div class="row form-group" -->


Code (JavaScript)
$(function () 
{ 
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
        var num=parseInt($('#number').val())+1;
        //var tr=$("<tr id='tr"+num+"'><td><span></span></td>");
        var ix=0;
        //$('#tbody').append(tr);
        $("div .active span").each(function(index, element) {
            ix++
            $(this).text(ix);
        });	
        $('#number').val(num);

        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  
        .appendTo($(".place-datarow"));     
           
    }); 
     
    $("#removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        if($(".place-datarow tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ    
            $(".place-datarow tr:last").remove(); // ลบรายการสุดท้าย    
        }else{    
            // เหลือ 1 รายการลบไม่ได้    
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");    
        }    
    });    
});




Tag : PHP, MySQL, jQuery, Bootstrap Framework, WampServer









ประวัติการแก้ไข
2018-09-14 11:21:43
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2018-09-14 11:20:31 By : Takashi_7 View : 241 Reply : 3
 

 

No. 1



โพสกระทู้ ( 157 )
บทความ ( 0 )



สถานะออฟไลน์


ไม่ค่อยมีคนเอา jsfiddle มาให้ดูแหะ ช่วยได้เยอะเลยนะ
Code (JavaScript)
	
        //$('#number').val(ix);
        ix++;
    
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()
        .find("div.active span").text(ix).end()
        .appendTo($(".place-datarow")); 







แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-14 11:39:40 By : Jatmentz
 


 

No. 2



โพสกระทู้ ( 59 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : Jatmentz เมื่อวันที่ 2018-09-14 11:39:40
รายละเอียดของการตอบ ::
...ขอบคุณมากครับผม รวดเร็วทันใจจริงๆครับ

สำหรับใครที่ติดปัญหานี้ แก้ตามนี้เลย


Code (JavaScript)
$(function () 
{ 
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
        var num=parseInt($('#number').val())+1;
        //var tr=$("<tr id='tr"+num+"'><td><span></span></td>");
        var ix=0;
        //$('#tbody').append(tr);
        $("div .active span").each(function(index, element) {
            ix++
            $(this).text(ix);
        });	
        
          //$('#number').val(num);                         <---ปิด
          ix++                                                        <---เพิ่ม
          $(".datarow:eq(0)").clone(true)     
         .find("input").attr("value","").end()    
         .find("select").attr("value","").end() 
         .find("div.active span").text(ix).end()       <---เพิ่ม
        .appendTo($(".place-datarow"));     
           
    }); 
     
    $("#removeRow").on("click",function(){    
        //ส่วนสำหรับการลบ    
        if($(".place-datarow tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ    
            $(".place-datarow tr:last").remove(); // ลบรายการสุดท้าย    
        }else{    
            // เหลือ 1 รายการลบไม่ได้    
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");    
        }    
    });    
});


ตัวอย่างตามนี้เลย
http://jsfiddle.net/HpwZ2/47/


ประวัติการแก้ไข
2018-09-14 14:16:13
2018-09-14 14:18:19
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-14 14:12:20 By : Takashi_7
 

 

No. 3



โพสกระทู้ ( 157 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 2 เขียนโดย : Takashi_7 เมื่อวันที่ 2018-09-14 14:12:20
รายละเอียดของการตอบ ::
อีกเรื่องนะครับ การกำหนด id ของวัตถุ ไม่ควรกำหนดซ้ำกันนะครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-09-14 14:18:33 By : Jatmentz
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามปัญหาการเรียงลำดับให้กับตารางโดยการเพิ่มแบบ clone หลายแถว
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่