เพิ่มแถวตารางได้ แต่เลือกข้อมูลการทำงานได้แค่ชุดแถวแรกค่ะ

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

เพิ่มแถวตารางได้ แต่เลือกข้อมูลการทำงานได้แค่ชุดแถวแรกค่ะ
1
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script language="javascript" src="js/jquery-1.4.1.min.js">//เพิ่มแถวข้อมูล</script>
<script type="text/javascript">
$(function(){
    $("#addRow").click(function(){
        $("#myTbl").append($("#firstTr").clone());//append เพิ่มอิลิเมนต์ไว้ด้านล่าง // clone ใช้คัดลอกรูปแบบข้อมูลที่ต้องการ
    });
    $("#removeRow").click(function(){
        if($("#myTbl tr").size()>1){
            $("#myTbl tr:last").remove();
        }else{
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });        
});
</script>
<table id="myTbl" border="1" align="center" cellpadding="0" cellspacing="1">
  <tr id="firstTr">
       <td height="28" bgcolor="#FFFFFF" align="left">&nbsp;<?php if(isset($sup_name))echo $round;else echo null; ?></td>
        <td height="28" bgcolor="#FFFFFF" align="left">
        <span class="txthmsg"></span>
        <span class="frmSearch">
        <input type="text" id="search-box" placeholder="Supplier Name" name="search_sup[]"
    value="<?php if(isset($sup_name)) echo $rs['sup_name']; else echo null;?>"/>
        </span> 
  <div class="frmSearch">
    <div id="suggesstion-box"></div></div></td>
        <td height="28" width="100px" bgcolor="#FFFFFF" align="left">&nbsp;<?php if(isset($sup_name))echo $rs['sup_distance']." กม. "; else "- กม."; ?>
        <input type="text" name="kg_new[]" size="1px"></td>
       <td height="20" bgcolor="#FFFFFF"><p>
       <label><input type="radio" name="Radio_day[]" value="1" id="Radio_day[]">วันหยุด</label><br>
        <label><input name="Radio_day[]" type="radio" id="Radio_day[]" value="2" checked="CHECKED"> วันปกติ</label><br></p></td>
        <td height="20" bgcolor="#FFFFFF"><p>
            <label><input type="radio" name="Radio_degree[]" value="1" id="Radio_degree[]"> ด่วน</label> 
            จำนวน ชม. <input name="time[]" type="text" size="3"><br>
            <label><input name="Radio_degree[]" type="radio" id="Radio_degree[]" value="2" checked="CHECKED">ไม่ด่วน</label>
            <br></p></td>
          <td height="25" bgcolor="#FFFFFF"><p>
            <label><input type="radio" name="Radio_time[]" value="1" id="Radio_time_0">ก่อน 8.00 น.</label>
            <br><label><input name="Radio_time[]" type="radio" id="Radio_time_1" value="2" checked="CHECKED">เวลาปกติ</label>
            <br><label><input type="radio" name="Radio_time[]" value="3" id="Radio_time_2">หลัง 17.00 น.</label><br></p>
            <span class="style4"></span></td>
          <td height="25" bgcolor="#FFFFFF">
          <button id="addRow" type="button">+</button>
          <button id="removeRow" type="button">-</button></td>
            
     </tr></table>
     <input name="submit" type="submit" id="submit" action="trans_save.php" value="บันทึกข้อมูลทั้งหมด" style="text-align:right" >
</form>


Violet Rose 07-06-2018 13:43:44

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

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


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


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

 ความคิดเห็นที่ 1
ใน jquery หรือ css selector การอ้างอิงเวลาใช้ id ด้วย # ค่าจะต้องไม่ซ้ำกัน
ปกติ เราควรเอาปุ่ม เพิ่ม กับ ลบ ออกจากแถวที่ทำการ clone() แต่ถ้าต้องการให้มีปุ่ม
เพิ่ม และลบ อยู่ในแถวที่ทำการ clone เราต้องเปลี่ยนมาใช้เป็น class ซึ่งสามารถซ้ำกันได้
จาก id ให้เปลี่ยนเป็น class แทน และเปลี่ยนการอ้างอิงจาก (#) เป็น (.) 
รายการใน แถว ยกเลิกการกำหนด id ให้กับ element และกำหนด name ของ element ใน
แถวที่จะทำการ clone มี ken เป็น 0 ทุกต้ัว เช่น name="search_sup[0]" หรือ name="Radio_day[0]"  
 
และหากต้องการให้สามารถลบแถวใดๆ ได้ โดยไม่ใช่ลบเฉพาะแถวสุดท้าย สามารถดูตัวอย่างนี้เป็นแนวทาง
 
 
 



จำนวน ชม.






1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
</head>
<body>
<table id="myTbl" border="1" align="center" cellpadding="0" cellspacing="1">
  <tr class="firstTr">
    <td height="28" bgcolor="#FFFFFF" align="left">&nbsp;</td>
    <td height="28" bgcolor="#FFFFFF" align="left"><span class="txthmsg"></span> <span class="frmSearch">
      <input type="text" id="search-box" placeholder="Supplier Name" name="search_sup[0]"
    value=""/>
      </span>
      <div class="frmSearch">
        <div id="suggesstion-box"></div>
      </div></td>
    <td height="28" width="100px" bgcolor="#FFFFFF" align="left">&nbsp;
      <input type="text" name="kg_new[0]" size="1px"></td>
    <td height="20" bgcolor="#FFFFFF"><p>
        <label>
          <input type="radio" name="Radio_day[0]" value="1" >
          วันหยุด</label>
        <br>
        <label>
          <input name="Radio_day[0]" type="radio"  value="2" checked="CHECKED">
          วันปกติ</label>
        <br>
      </p></td>
    <td height="20" bgcolor="#FFFFFF"><p>
        <label>
          <input type="radio" name="Radio_degree[0]" value="1" >
          ด่วน</label>
        จำนวน ชม.
        <input name="time[]" type="text" size="3">
        <br>
        <label>
          <input name="Radio_degree[0]" type="radio" value="2" checked="CHECKED">
          ไม่ด่วน</label>
        <br>
      </p></td>
    <td height="25" bgcolor="#FFFFFF"><p>
        <label>
          <input type="radio" name="Radio_time[0]" value="1" >
          ก่อน 8.00 น.</label>
        <br>
        <label>
          <input name="Radio_time[0]" type="radio"  value="2" checked="CHECKED">
          เวลาปกติ</label>
        <br>
        <label>
          <input type="radio" name="Radio_time[0]" value="3" id="Radio_time_2">
          หลัง 17.00 น.</label>
        <br>
      </p>
      <span class="style4"></span></td>
    <td height="25" bgcolor="#FFFFFF"><button class="addRow" type="button">+</button>
      <button class="removeRow" type="button">-</button></td>
  </tr>
</table>
<input name="submit" type="submit" id="submit" action="trans_save.php" value="บันทึกข้อมูลทั้งหมด" style="text-align:right" >
</form>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
 
    var num_clone = 0; // กำหนดค่า key สำหรับนับเพิ่ม กรณี้ใช้กับ checkbox ลแะ radio แบบ array
    $(".addRow").on("click",function(){
        num_clone++;
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true)
        .find("input").val("").end() // ล้างค่า input
        .find("select").val("").end() // ล้างค่า select
        .find(":radio").prop("checked",false).end() // ล้างค่า radio
        .find(":checkbox").prop("checked",false).end() // ล้างค่า checkbox
        .find("select").val("").end() // ล้างค่า select element
        .find("[name^='search_sup']").attr("name","search_sup["+num_clone+"]").end()
        .find("[name^='kg_new']").attr("name","kg_new["+num_clone+"]").end()
        .find("[name^='Radio_day']").attr("name","Radio_day["+num_clone+"]").end()
        // วนทำค่าอื่นๆ ให้ครบ ตามต้องการ .find("[name^='ชื่อ]").attr("name","ชื่อ["+num_clone+"]").end()
        .appendTo($("#myTbl"));
    });
     
    $(".removeRow").on("click",function(){
        var indexThis = $(".removeRow").index($(this)); // หา key รายการที่จะลบ
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").length>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:eq("+indexThis+")").remove(); // ลบรายการของแถวที่จะลบ
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });  
   
});
</script>
</body>
</html>
 
อย่างไรก็ตาม การเลือกที่จะลบรายการในแถวใดๆ ก็ได้ จะมีผลกับลำดับของข้อมูล ซึ่งถ้าใช้ในการแก้ไข
ข้อมูล แนะนำให้ทำการลบค่าเก่า แล้วทำการ Insert ค่าใหม่แทนการ Update
 
ดูการประยุกต์การใช้ class แทน id ในบทความนี้
การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery http://niik.in/478 


ninenik 07-06-2018
 ความคิดเห็นที่ 2
yesขอบคุณมากนะคะ อธิบายเข้าใจง่าย ละเอียด ชัดเจน ปกติเรียนใช้แต่ php ต้องศึกษาภาษาอื่นๆอีกเยอะเลย
แล้วบางทีหาข้อมูลแล้วเราอ่านคำอธิบายไม่ค่อยเข้าใจ(ไม่เก่งภาษา555) ขอบคุณค่ะsmiley


Violet Rose 07-06-2018 16:35







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