Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

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

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

เริ่มหัวข้อใหม่

Imbeck

โพสกระทู้ ( 63 )
บทความ ( 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

Date : 2018-09-14 11:20:31

By : Takashi_7

View : 1046

Reply : 3

No. 1

Tuii

โพสกระทู้ ( 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

Imbeck

โพสกระทู้ ( 63 )
บทความ ( 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

Tuii

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

ตอบความคิดเห็นที่ : 2 เขียนโดย : Takashi_7 เมื่อวันที่ 2018-09-14 14:12:20

รายละเอียดของการตอบ ::

อีกเรื่องนะครับ การกำหนด id ของวัตถุ ไม่ควรกำหนดซ้ำกันนะครับ

Date : 2018-09-14 14:18:33

By : Jatmentz

ค้นหาข้อมูล

แสดงความคิดเห็น

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

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038