สอบถามการลบแถวโดยใช้ jQuery

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามการลบแถวโดยใช้ jQuery

สอบถามการลบแถวโดยใช้ jQuery

จากตัวอย่างนี้

แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก : https://www.ninenik.com/content.php?arti_id=540

ถ้าต้องการให้ปุ่มลบ ไปอยู่ด้านหลังของแต่ละแถว เพื่อให้สามารถเลือกลบแต่ละแถวได้ ...ต้องปรับ code ในส่วนของ html และ script อย่างไรบ้างครับ ขอบคุณครับ



Hardalways 171.97.88.xxx 19-11-2014 21:30:30

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ปรับโค้ดจากตัวอย่างเดิมนิดหน่อยก็น่าจะใช้ได้

ตัวอย่าง


ประเภท ยี่ห้อ ชื่อสินค้า วันที่ 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/jquery.datetimepicker.css">
    <style type="text/css">
    .css_more{
        display: none;
    }
    </style>
</head>
<body>
   
    <br>
    <div style="margin:auto;width:90%;">
    <form role="form" method="post" action="show.php">
      <table class="table table-striped">
          <tr class="active">
              <th class="text-center">ประเภท</th>
              <th class="text-center">ยี่ห้อ</th>
              <th class="text-center">ชื่อสินค้า</th>
              <th class="text-center">วันที่</th>
              <th width="130" class="text-center"></th>
          </tr>
          <tbody class="place-datarow">
              <tr class="datarow" >
                  <td>
                    <select name="type_product[]" class="form-control css_i_select">
                        <option value="">Select Type</option>
                        <option value="A">Type A</option>
                        <option value="B">Type B</option>
                    </select>  
                      
                  </td>
                  <td>
                    <select name="brand_product[]" class="form-control">
                        <option value="">Select Brand</option>
                        <option value="AAA">Brand AAA</option>
                        <option value="BBB">Brand BBB</option>
                    </select>                  
                  </td>
                  <td>
                  <input type="text" class="form-control" name="name_product[]" >
                  </td>
                  <td>
                  <input type="text" class="form-control css_datetime_picker" name="date_product[]" value="" id="id_datetime_picker0" >
                  </td>
                  <td>
                <button id="removeRow" type="button" class="removeRow btn btn-danger" style="display:none;">-</button>
                  </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">
                
              </td>
              <td class="text-right">
               <button type="submit" class="btn btn-success">Submit</button>
                  
              </td>
          </tr>
      </table>
      </form>
    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$(function(){

    
    $("#id_datetime_picker0").datetimepicker(); 
        

    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .find(".removeRow").show().end()
        .appendTo($(".place-datarow"));     
        var lastIndex=$(".css_datetime_picker").size()-1; // หา index ของตัว input ล่าสุด  
        var newId="id_datetime_picker"+lastIndex;
        var objID="#"+newId;
        var placeParent=$(".css_datetime_picker:eq("+lastIndex+")").parents("td");    
        // แทนด้วย input ใหม่ ทับตัวเก่าไปเลย
         $(placeParent).html("<input type=\"text\" class=\"form-control css_datetime_picker\" name=\"date_product[]\" >");     
        $(".css_datetime_picker:eq("+lastIndex+")")
        .attr("id", newId) // - กำหนด id เป็นค่าใหม่
        .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone        
        $(objID).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง          
          
    }); 
    
    $(".removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        $(this).parents("tr").remove();
    });        
    
});
</script>    
</body>
</html>


ninenik 1.46.210.xxx 19-11-2014
 ความคิดเห็นที่ 2
สอบถามเพิ่มเติมครับ :

- กรณีกดเพิ่มแถวมาอีก 2 แถว จะได้ค่า id_datetime_picker = 0/1/2 ตามลำดับ หากลบแถวที่สองทิ้งไป id_datetime_picker1 จะถูกลบ (เหลือ id_datetime_picker 0/2) จากนั้นกดเพิ่มแถวขึ้นมาอีก 1 แถว จะได้ค่า id_datetime_picker = 2 ซึ่งซ้ำกับค่า id เดิม (เช็คใน คอนโซล javascript เกิด error "Uncaught TypeError: Cannot read property 'allowTimes' of undefined") ทำให้ไม่สามารถใช้งานฟังก์ชั่น datetimepicker ในคอลัมน์วันที่ ในแถวที่เพิ่มขึ้นมาใหม่ได้

ต้องปรับ code เป็นอย่างไร รบกวนขอคำชี้แนะด้วยครับ ขอบคุณครับ


hardalways 171.97.88.xxx 20-11-2014 01:01
 ความคิดเห็นที่ 3
 อ้อ  id ซ้ำกัน
ลองเปลี่ยนใช้ time สร้าง id แทนดู น่าจะใช้ได้

เปลี่ยนจาก

var newId="id_datetime_picker"+lastIndex;


เป็น

var newId="id_datetime_picker"+new Date().getTime();


ninenik 115.87.93.xxx 20-11-2014
 ความคิดเห็นที่ 4
ขอบคุณมากครับ ใช้งานได้ดีเลยครับ

สอบถามเพิ่มเติมครับ :

ถ้าต้องการประยุกต์เพิ่มเติมโดยใส่ radio และ checkbox ภายใต้ tr ด้วย ต้องปรับ code เป็นอย่างไร รบกวนขอคำชี้แนะด้วยครับ (ลองนั่งปรับจาก code ตัวอย่าง ก็ยังไม่สำเร็จสักที เหมือนว่าค่าที่เลือก มันลง array ไม่ถูกน่ะครับ)

ขอบคุณครับ


hardalways 61.19.210.xxx 20-11-2014 17:12
 ความคิดเห็นที่ 5
ค่อนข้างจะกำหนดยาก ถ้าใช้กำหนด checkbox และ radio 
ถ้าจำเป็นต้องดัดแปลง ให้ใช้วิธีทำเป็น hidden แทน  เอาตัวอย่างนี้ไปทดสอบลองดู
ค่าของ checkbox จะใช้ ค่าจาก input hidden ของ checkbox ชื่อ value_checkbox
ส่วนของ radio จะใช้ค่าจาก input hidden ของ radio ชื่อ value_radio
ที่สำคัญ radio จะมีการแปลี่ยนชื่อด้วย 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/jquery.datetimepicker.css">
    <style type="text/css">
    .css_more{
        display: none;
    }
    </style>
</head>
<body>
   
    <br>
    <div style="margin:auto;width:90%;">
    <form role="form" method="post" action="">
      <table class="table table-striped">
          <tr class="active">
              <th class="text-center">ประเภท</th>
              <th class="text-center">ยี่ห้อ</th>
              <th class="text-center">ชื่อสินค้า</th>
              <th class="text-center">วันที่</th>
              <th width="130" class="text-center"></th>
          </tr>
          <tbody class="place-datarow">
              <tr class="datarow" >
                  <td>
                    <select name="type_product[]" class="form-control css_i_select">
                        <option value="">Select Type</option>
                        <option value="A">Type A</option>
                        <option value="B">Type B</option>
                    </select>  
                      
                  </td>
                  <td>
                    <select name="brand_product[]" class="form-control">
                        <option value="">Select Brand</option>
                        <option value="AAA">Brand AAA</option>
                        <option value="BBB">Brand BBB</option>
                    </select>                  
                  </td>
                  <td>
                  <input type="text" class="form-control" name="name_product[]" >
                  <input type="hidden" class="h_for_chk" name="value_checkbox[]" value="0">
                  <input type="checkbox" class="chk_css" name="icheck[]" value="1" > Check
                  <input type="hidden" class="h_for_rdo" name="value_radio[]" value="0">
                  <input type="radio" class="rdo_css" name="radio1[]" value="1" > Radio1
                  <input type="radio" class="rdo_css" name="radio1[]" value="2" > Radio2
                  </td>
                  <td>
                  <input type="text" class="form-control css_datetime_picker" name="date_product[]" value="" id="id_datetime_picker0" >
                  </td>
                  <td>
                <button id="removeRow" type="button" class="removeRow btn btn-danger" style="display:none;">-</button>
                  </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">
                
              </td>
              <td class="text-right">
               <button type="submit" class="btn btn-success">Submit</button>
                  
              </td>
          </tr>
      </table>
      </form>
    </div>
    <pre>
        <?php print_r($_POST); ?>
    </pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$(function(){

    
    $("#id_datetime_picker0").datetimepicker(); 
        
    var k=1;
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
        k++;
        $(".datarow:eq(0)").clone(true)     
        .find(":text").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .find(":radio").prop("checked",false).attr("name","radio"+k+"[]").end()  //
        .find(":checkbox").prop("checked",false).end()  //
        .find(".removeRow").show().end()
        .appendTo($(".place-datarow"));     
        var lastIndex=$(".css_datetime_picker").size()-1; // หา index ของตัว input ล่าสุด  
//        var newId="id_datetime_picker"+lastIndex;
        var newId="id_datetime_picker"+new Date().getTime();  
        var objID="#"+newId;
        var placeParent=$(".css_datetime_picker:eq("+lastIndex+")").parents("td");    
        // แทนด้วย input ใหม่ ทับตัวเก่าไปเลย
         $(placeParent).html("<input type="text" class="form-control css_datetime_picker" name="date_product[]" >");     
        $(".css_datetime_picker:eq("+lastIndex+")")
        .attr("id", newId) // - กำหนด id เป็นค่าใหม่
        .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone        
        $(objID).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง          
    }); 
    
    $(".removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        $(this).parents("tr").remove();
    });        

    $(".chk_css").on("click",function(){
        var i_check=($(this).prop("checked")==true)?1:0;
        $(this).prevAll(".h_for_chk").val(i_check);
    });
    
    $(".rdo_css").on("click",function(){
        console.log($(this).val());
        var i_check=($(this).prop("checked")==true)?$(this).val():0;
        console.log(i_check);
        var obj=$(this).prevAll(".h_for_rdo");
        console.log($(this).prevAll(".h_for_rdo").val());
        obj.val(i_check);
//        $(this).prevAll(".h_for_rdo").val(i_check);
    });    
    
});
</script>    
</body>
</html>


ninenik 1.46.19.xxx 21-11-2014
 ความคิดเห็นที่ 6
สอบถามเพิ่มเติมครับ :

ได้นำตัวอย่างล่าสุดไปประยุกต์ใช้แล้วปรากฎว่าค่า radio ลง array ได้ถูกต้องแล้วครับ แต่มีข้อสงสัยว่าถ้าเพิ่มแถวขึ้นมาใหม่ ค่า radio จะเป็นค่าว่าง (ทั้งๆ ที่ติ๊กแล้ว) ตามรูปด้านล่างครับ



รบกวนขอคำชี้แนะด้วยครับ ขอบคุณครับ


hardalways 61.19.210.xxx 21-11-2014 12:29
 ความคิดเห็นที่ 7
ดูจากโค้ดได้เลย สังเกตจะมีการเปลี่ยน บรรทัดนี้ ลองเช็คดดูก่อน มีการเปลี่ยนจาก find("input")  เป็น find(":text")

        .find(":text").attr("value","").end()      
        .find("select").attr("value","").end()  //     
        .find(":radio").prop("checked",false).attr("name","radio"+k+"[]").end()  //  
        .find(":checkbox").prop("checked",false).end()  //  
        .find(".removeRow").show().end()


ninenik 124.120.228.xxx 21-11-2014
 ความคิดเห็นที่ 8
โค้ดใช้ได้แล้วครับ เกิดจากความสะเพร่าของผมเองที่ไม่ได้เปลี่ยนค่าตามบรรทัดที่บอก
 
-----------------------------------------------------------------------------------------------------
 
ทีนี้ผมเอามาประยุกต์ต่อโดยการเพิ่ม checkbox หลายๆ อัน จึงมีคำถาม และอยากขอคำแนะนำดังนี้ :
 
1. ต้องการให้มีไอดีในแต่ละแถว <tr>
 
2. ดีไซน์ไว้ว่าจะให้ข้อมูลลง 2 เทเบิ้ล ดังนี้
     - เทเบิ้ลแรก จะเก็บไอดีของแถว และข้อมูลส่วนต่างๆ ยกเว้นค่าจาก checkbox
     - เทเบิ้ลสอง จะเก็บไอดีของแถว และค่าจาก checkbox
 
3. เทเบิ้ลแรก ข้อมูลน่าจะลงฐานฯ ได้ ไม่น่ามีปัญหา เพราะเป็น array มิติเดียว ส่วนเทเบิ้ลสอง น่าจะต้องทำเป็น array สองมิติ โดยใช้ไอดีของแถวสร้าง array เพิ่มขึ้นอีก 1 ค่าใน input checkbox [icheck] (ถ้าทำวิธีนี้ ค่า input hidden [value_checkbox] ไม่ต้องมีก็ได้)
 
4. เวลาดึงข้อมูลขึ้นมาโชว์ก็เอาไอดีของแถว จาก 2 เทเบิ้ลมา join กัน
 
ถ้าผมเข้าใจตรงส่วนไหนผิดไป ขออภัยด้วยครับ แหะๆ ทำได้แบบงูๆ ปลาๆ รบกวนขอคำชี้แนะด้วยครับ
 
ขอบคุณครับ
 
ปล. ผมแก้ html ในไฟล์ตัวอย่างล่าสุดนิดหน่อย โดยแยกคอลัมน์ <td> radio และ checkbox ออกจากกัน


hardalways 61.19.210.xxx 21-11-2014 19:06
 ความคิดเห็นที่ 9
ส่วนของเนื้อหาที่ซับซ้อนคงต้องประยุกต์และหาวิธีเองดูอีกที 


ninenik 1.47.19.xxx 21-11-2014
 ความคิดเห็นที่ 10
อ่อครับ ขอบคุณมากๆ ครับ สำหรับความช่วยเหลือ


hardalways 58.11.12.xxx 21-11-2014 22:03
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ