การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
jquery jqueryui clone autocomplete

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery jqueryui clone autocomplete

ดูแล้ว 25,341 ครั้ง




รูปแบบหรือลักษณะการทำงานของเนื้อหานี้คือ
 
- มีฟอร์ม สำหรับรับค่า โดยเราสามารถเพิ่ม ลบ หรือแก้ไขข้อมูลได้
- สามารถเพิ่ม ลบ แถวของชุดข้อมูล ที่ต้องการบันทึกได้
- การลบแถวของข้อมูล ในที่นี้จะลบจากด้านล่างสุดขึ้นมา 
  (หากต้องการลบแต่ละรายการ แบบเลือกลบ รายการเองได้ 
   สามารถเพิ่มโค้ดคำสั่ง หรือปุ่มจัดการอื่นๆ เข้าไปตามต้องการ)
- ข้อมูลจะมีการบันทึก เมื่อกดปุ่ม submit
 
ชุดตัวอย่างนี้เป็นการทำงานกับข้อมูลในฐานข้อมูล สามารถสร้าง
ตารางสำหรับทดสอบ ตาม sql ด้านล่าง
ตาราง tbl_data สำหรับทดสอบ

1
2
3
4
5
6
7
8
9
10
11
12
CREATE TABLE `tbl_data` (
  `data_id` int(11) NOT NULL auto_increment,
  `data_text` varchar(255) NOT NULL,
  `data_select` int(5) NOT NULL,
  PRIMARY KEY  (`data_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=9 ;
 
--
-- Dumping data for table `tbl_data`
--
 
INSERT INTO `tbl_data` VALUES (1, 'data1', 1);


ตัวอย่าง (เฉพาะในส่วนนี้ แสดงเฉพาะการเพิ่ม ลบ แถวเท่านั้น การเชื่อมต่อ
กับฐานข้อมูล ดูโค้ดด้านล่าง ทั้งหมด


       


สิ่งที่จำเป็นต้องมี และเหตุผลที่ต้องใช้งาน
 
ส่วนของตาราง กำหนด  id="myTbl"  เพื่อไว้เรียกใช้งาน

1
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
 
ส่วนของแถวข้อมูลสำหรับ clone   กำหนด class="firstTr" ไว้เรียกใช้งาน

1
<tr class="firstTr">
 
ชุดของข้อมูลจะเก็บเป็น form array รูปแบบจะใช้ เป็นแบบ [] เช่น 

1
<input type="text" class="text_data" name="data2[]" id="data2[]" value="" />
 
ต้องมีการเก็บค่า และใช้งาน input hidden เพื่อเก็บค่า id หลัก สำหรับส่งไปดำเนินการ
ในการเพิ่ม ลบ หรือแก้ไขข้อมูล ให้สอดคล้องกัน

1
<input name="h_item_id[]" type="hidden" id="h_item_id[]" value="" />
 
ต้องมีการเก็บค่า และใช้งาน input hidden สำหรับเก็บค่า id หลัก แบบ รวม
เพื่อเก็บค่า id หลักที่มีอยู่ก่อนแล้ว เพื่อใช้ในการตรวจสอบ รายการที่ต้องการลบ

1
<input name="h_all_id_data" type="hidden" id="h_all_id_data" value="<?=$all_id_data?>" />
 
ส่วนของการบันทึกข้อมูล
 
 
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
<?php
/// ส่วนของการเพิ่ม ลบ แก้ไข ข้อมูล
if($_POST['Submit']){
     
    // ตรวจสอบค่า id หลักของข้อมูล ว่ามีข้อมูลหรือไม่
    if(count($_POST['h_item_id'])>0){
        // แยกค่า id หลักของข้อมูลเดิม ถ้ามี เก็บเป็นตัวแปร array
        $h_data_id_arr=explode(",",substr($_POST['h_all_id_data'],0,-1));
        foreach($_POST['h_item_id'] as $key_data=>$value_data){// วนลูป จัดการกับค่า id หลัก
            if($value_data==""){ // ถ้าไม่มีค่า แสดงว่า จะเป็นการเพิ่มข้อมูลใหม่
                @mysql_query("
                    INSERT INTO tbl_data (
                        data_id,
                        data_text,
                        data_select
                    )
                    VALUES (
                        NULL ,
                          '".$_POST['data2'][$key_data]."',
                            '".$_POST['data1'][$key_data]."'
                    );         
                ");
            }else{ // ถ้ามีค่าอยู่แล้ว ให้อัพเดท รายการข้อมูลเดิม โดยใช้ ค่า id หลัก
                @mysql_query("
                    UPDATE  tbl_data SET 
                    data_text =  '".$_POST['data2'][$key_data]."',
                    data_select =  '".$_POST['data1'][$key_data]."'
                    WHERE data_id='".$value_data."' ;              
                ");
            }
        }
         
        // ตรวจสอบ id หลัก ค่าเดิม และค่าใหม่ เพื่อหาค่าที่ถูกลบออกไป
        $h_data_id_arr_del = array_diff($h_data_id_arr, $_POST['h_item_id']);
        if(count($h_data_id_arr_del)>0){ // ถ้ามี array ค่า id หลัก ที่จะถูกลบ
            foreach($h_data_id_arr_del as $key_data=>$value_data){// วนลูป ลบรายการที่ไม่ต้องการ
                @mysql_query("
                    DELETE FROM tbl_data WHERE data_id='".$value_data."' ;     
                ");
            }
        }
         
 
    }
}
?>


 
 
โค้ดตัวอย่าง และคำอธิบาย แสดงตามไฟล์ เดียวด้านล่าง
 
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<?php   
$link=mysql_connect("localhost","root","test"); // เชื่อมต่อ Server   
mysql_select_db("test");  // ติดต่อฐานข้อมูล   
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล   
?>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery add remove row</title>
</head>
 
<body>
 
<?php
/// ส่วนของการเพิ่ม ลบ แก้ไข ข้อมูล
if($_POST['Submit']){
     
    // ตรวจสอบค่า id หลักของข้อมูล ว่ามีข้อมูลหรือไม่
    if(count($_POST['h_item_id'])>0){
        // แยกค่า id หลักของข้อมูลเดิม ถ้ามี เก็บเป็นตัวแปร array
        $h_data_id_arr=explode(",",substr($_POST['h_all_id_data'],0,-1));
        foreach($_POST['h_item_id'] as $key_data=>$value_data){// วนลูป จัดการกับค่า id หลัก
            if($value_data==""){ // ถ้าไม่มีค่า แสดงว่า จะเป็นการเพิ่มข้อมูลใหม่
                @mysql_query("
                    INSERT INTO tbl_data (
                        data_id,
                        data_text,
                        data_select
                    )
                    VALUES (
                        NULL ,
                          '".$_POST['data2'][$key_data]."',
                            '".$_POST['data1'][$key_data]."'
                    );         
                ");
            }else{ // ถ้ามีค่าอยู่แล้ว ให้อัพเดท รายการข้อมูลเดิม โดยใช้ ค่า id หลัก
                @mysql_query("
                    UPDATE  tbl_data SET 
                    data_text =  '".$_POST['data2'][$key_data]."',
                    data_select =  '".$_POST['data1'][$key_data]."'
                    WHERE data_id='".$value_data."' ;              
                ");
            }
        }
         
        // ตรวจสอบ id หลัก ค่าเดิม และค่าใหม่ เพื่อหาค่าที่ถูกลบออกไป
        $h_data_id_arr_del = array_diff($h_data_id_arr, $_POST['h_item_id']);
        if(count($h_data_id_arr_del)>0){ // ถ้ามี array ค่า id หลัก ที่จะถูกลบ
            foreach($h_data_id_arr_del as $key_data=>$value_data){// วนลูป ลบรายการที่ไม่ต้องการ
                @mysql_query("
                    DELETE FROM tbl_data WHERE data_id='".$value_data."' ;     
                ");
            }
        }
         
 
    }
}
?>
 
<br />
<br />
<br />
 
<div style="margin:auto;width:700px;">
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
<?php
$all_id_data="";
$q="SELECT * FROM tbl_data WHERE 1 ORDER BY data_id ";
$qr=@mysql_query($q);
if(@mysql_num_rows($qr)>0){
?>
<?php
    while($rs=@mysql_fetch_array($qr)){
        $all_id_data.=$rs['data_id'].",";
?>
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1" <?=($rs['data_select']==1)?"selected":""?>>data1</option>
    <option value="2" <?=($rs['data_select']==2)?"selected":""?>>data2</option>
    </select></td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="<?=$rs['data_id']?>" />
    <input type="text" class="text_data" name="data2[]" id="data2[]" value="<?=$rs['data_text']?>" />
    </td>
    </tr>
<?php } ?>   
<?php }else{ ?>
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1">data1</option>
    <option value="2">data2</option>
    </select></td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="" />
    <input type="text" class="text_data" name="data2[]" id="data2[]" />
    </td>
    </tr>
 <?php } ?>  
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button> 
    &nbsp;
    <button id="removeRow" type="button">-</button>
    &nbsp;
    &nbsp;
    &nbsp;
    <input name="h_all_id_data" type="hidden" id="h_all_id_data" value="<?=$all_id_data?>" />   
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
</form>
 
 
 
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
     
    $("#addRow").click(function(){
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true)
        .find("input").attr("value","").end()
        .find("select").attr("value","").end()
        .appendTo($("#myTbl"));
    });
    $("#removeRow").click(function(){
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });
     
 
});
</script>
 
 
</body>
</html>
 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 21-10-2017


ตัวอย่างโค้ดปรับใช้กับ mysqli

 
ไฟล์ dbconnect.php
 
1
2
3
4
5
6
7
8
9
10
11
<?php 
$mysqli = new mysqli("localhost", "root","","test"); 
/* check connection */
if ($mysqli->connect_errno) { 
    printf("Connect failed: %sn", $mysqli->connect_error); 
    exit(); 
} 
if(!$mysqli->set_charset("utf8")) { 
    printf("Error loading character set utf8: %sn", $mysqli->error); 
    exit(); 
}
 
ไฟล์ตัวอย่าง
 
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<?php
require_once('inc/dbconnect.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
  
<?php
/// ส่วนของการเพิ่ม ลบ แก้ไข ข้อมูล
if(isset($_POST['Submit'])){
      
    // ตรวจสอบค่า id หลักของข้อมูล ว่ามีข้อมูลหรือไม่
    if(isset($_POST['h_item_id']) && count($_POST['h_item_id'])>0){
        // แยกค่า id หลักของข้อมูลเดิม ถ้ามี เก็บเป็นตัวแปร array
        $h_data_id_arr=explode(",",$_POST['h_all_id_data']);
        foreach($_POST['h_item_id'] as $key_data=>$value_data){// วนลูป จัดการกับค่า id หลัก
            if($value_data==""){ // ถ้าไม่มีค่า แสดงว่า จะเป็นการเพิ่มข้อมูลใหม่
                $sql = "
                    INSERT INTO tbl_data (
                        data_id,
                        data_text,
                        data_select
                    )
                    VALUES (
                        NULL ,
                          '".$_POST['data2'][$key_data]."',
                            '".$_POST['data1'][$key_data]."'
                    );                     
                ";
                $mysqli->query($sql);
            }else{ // ถ้ามีค่าอยู่แล้ว ให้อัพเดท รายการข้อมูลเดิม โดยใช้ ค่า id หลัก
                $sql = "
                    UPDATE  tbl_data SET 
                    data_text =  '".$_POST['data2'][$key_data]."',
                    data_select =  '".$_POST['data1'][$key_data]."'
                    WHERE data_id='".$value_data."' ;                  
                ";
                $mysqli->query($sql);
            }
        }
          
        // ตรวจสอบ id หลัก ค่าเดิม และค่าใหม่ เพื่อหาค่าที่ถูกลบออกไป
        $h_data_id_arr_del = array_diff($h_data_id_arr, $_POST['h_item_id']);
        if(count($h_data_id_arr_del)>0){ // ถ้ามี array ค่า id หลัก ที่จะถูกลบ
            foreach($h_data_id_arr_del as $key_data=>$value_data){// วนลูป ลบรายการที่ไม่ต้องการ
                $sql = "
                    DELETE FROM tbl_data WHERE data_id='".$value_data."' ;  
                ";
                $mysqli->query($sql);
            }
        }
          
  
    }
}
?>
  
<br />
<br />
<br />
  
<div style="margin:auto;width:700px;">
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
<?php
$all_id_data = array();
$sql="SELECT * FROM tbl_data WHERE 1 ORDER BY data_id ";
$result = $mysqli->query($sql);
if(isset($result) && $result->num_rows>0){
?>
<?php
    while($row = $result->fetch_assoc()){
        $all_id_data[].=$row['data_id'];
?>
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1" <?=($row['data_select']==1)?"selected":""?>>data1</option>
    <option value="2" <?=($row['data_select']==2)?"selected":""?>>data2</option>
    </select></td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="<?=$row['data_id']?>" />
    <input type="text" class="text_data" name="data2[]" id="data2[]" value="<?=$row['data_text']?>" />
    </td>
    </tr>
<?php } ?>   
<?php }else{ ?>
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1">data1</option>
    <option value="2">data2</option>
    </select></td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="" />
    <input type="text" class="text_data" name="data2[]" id="data2[]" />
    </td>
    </tr>
 <?php } ?>  
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button> 
    &nbsp;
    <button id="removeRow" type="button">-</button>
    &nbsp;
    &nbsp;
    &nbsp;
    <input name="h_all_id_data" type="hidden" id="h_all_id_data" value="<?=implode(",",$all_id_data)?>" />   
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
</form>
  
  
  
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script type="text/javascript">
$(function(){
      
    $("#addRow").click(function(){
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true)
        .find("input").attr("value","").end()
        .find("select").attr("value","").end()
        .appendTo($("#myTbl"));
    });
    $("#removeRow").click(function(){
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });
      
  
});
</script>
  
  
</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 21-10-2017


ประยุกต์ใช้งานกับ jqueryui autocomplete รองรับการ clone

 
แนวทางการประยุกต์เพิ่มเติม จากบทความ
    ประยุกต์ ใช้งาน jquery ui autocomplete ร่วมกับฐานข้อมูล อย่างง่าย http://niik.in/432 
 
ไฟล์ get_suggest.php
 
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
<?php
header("Content-type:application/json; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");        
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("inc/dbconnect.php");
$json_data = array();
$pagesize = 50; // จำนวนรายการที่ต้องการแสดง
$table_db="tbl_provinces"; // ตารางที่ต้องการค้นหา
$find_field="province_name"; // ฟิลที่ต้องการค้นหา
if(isset($_GET['term']) && $_GET['term']!=""){
    $q = $_GET["term"];
    $sql = "
        SELECT * FROM $table_db
        WHERE  LOCATE('$q', $find_field) > 0
        ORDER BY LOCATE('$q', $find_field), $find_field
        LIMIT $pagesize
    ";
}else{
    $sql = "
        SELECT * FROM $table_db  WHERE 1 LIMIT $pagesize
    ";     
}
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[]=array( 
            "id"=>$row['province_id'], 
            "label"=>$row['province_name'], 
            "value"=>$row['province_name'], 
        );         
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>
 
ไฟล์ตัวอย่าง รองรับการใช้งานร่วมกับ jqueryui autocomplete ที่สามารถ clone ได้
 
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<?php
require_once('inc/dbconnect.php');
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/pepper-grinder/jquery-ui.css" />
<style type="text/css">
.ui-autocomplete { 
    padding-right: 5px;
    max-height:200px !important;
    overflow: auto !important;
} 
</style>
</head>
  
<?php
/// ส่วนของการเพิ่ม ลบ แก้ไข ข้อมูล
if(isset($_POST['Submit'])){
      
    // ตรวจสอบค่า id หลักของข้อมูล ว่ามีข้อมูลหรือไม่
    if(isset($_POST['h_item_id']) && count($_POST['h_item_id'])>0){
        // แยกค่า id หลักของข้อมูลเดิม ถ้ามี เก็บเป็นตัวแปร array
        $h_data_id_arr=explode(",",$_POST['h_all_id_data']);
        foreach($_POST['h_item_id'] as $key_data=>$value_data){// วนลูป จัดการกับค่า id หลัก
            if($value_data==""){ // ถ้าไม่มีค่า แสดงว่า จะเป็นการเพิ่มข้อมูลใหม่
                $sql = "
                    INSERT INTO tbl_data (
                        data_id,
                        data_text,
                        data_select
                    )
                    VALUES (
                        NULL ,
                          '".$_POST['data2'][$key_data]."',
                            '".$_POST['data1'][$key_data]."'
                    );                     
                ";
                $mysqli->query($sql);
            }else{ // ถ้ามีค่าอยู่แล้ว ให้อัพเดท รายการข้อมูลเดิม โดยใช้ ค่า id หลัก
                $sql = "
                    UPDATE  tbl_data SET 
                    data_text =  '".$_POST['data2'][$key_data]."',
                    data_select =  '".$_POST['data1'][$key_data]."'
                    WHERE data_id='".$value_data."' ;                  
                ";
                $mysqli->query($sql);
            }
        }
          
        // ตรวจสอบ id หลัก ค่าเดิม และค่าใหม่ เพื่อหาค่าที่ถูกลบออกไป
        $h_data_id_arr_del = array_diff($h_data_id_arr, $_POST['h_item_id']);
        if(count($h_data_id_arr_del)>0){ // ถ้ามี array ค่า id หลัก ที่จะถูกลบ
            foreach($h_data_id_arr_del as $key_data=>$value_data){// วนลูป ลบรายการที่ไม่ต้องการ
                $sql = "
                    DELETE FROM tbl_data WHERE data_id='".$value_data."' ;  
                ";
                $mysqli->query($sql);
            }
        }
          
  
    }
}
?>
  
<br />
<br />
<br />
  
<div style="margin:auto;width:700px;">
<form id="form1" name="form1" method="post" action="">
<table id="myTbl" width="650" border="1" cellspacing="2" cellpadding="0">
<?php
$all_id_data = array();
$sql="SELECT * FROM tbl_data WHERE 1 ORDER BY data_id ";
$result = $mysqli->query($sql);
if(isset($result) && $result->num_rows>0){
?>
<?php
    while($row = $result->fetch_assoc()){
        $all_id_data[].=$row['data_id'];
?>
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1" <?=($row['data_select']==1)?"selected":""?>>data1</option>
    <option value="2" <?=($row['data_select']==2)?"selected":""?>>data2</option>
    </select></td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="<?=$row['data_id']?>" />
    <input type="text" class="text_data inputautofill" name="data2[]" id="data2[]" value="<?=$row['data_text']?>" />
    </td>
    </tr>
<?php } ?>   
<?php }else{ ?>
  <tr class="firstTr">
    <td width="119">
    <select name="data1[]" id="data1[]">
    <option value="">Please select</option>
    <option value="1">data1</option>
    <option value="2">data2</option>
    </select></td>
    <td width="519">
    <input name="h_item_id[]" type="hidden" id="h_item_id[]" value="" />
    <input type="text" class="text_data inputautofill" name="data2[]" id="data2[]" />
    </td>
    </tr>
 <?php } ?>  
</table>
<br />
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
    <button id="addRow" type="button">+</button> 
    &nbsp;
    <button id="removeRow" type="button">-</button>
    &nbsp;
    &nbsp;
    &nbsp;
    <input name="h_all_id_data" type="hidden" id="h_all_id_data" value="<?=implode(",",$all_id_data)?>" />   
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>
  </tr>
</table>
</form>
  
  
  
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>     
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
      
    $("#addRow").click(function(){
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input
        $(".firstTr:eq(0)").clone(true)
        .find("input").attr("value","").end()
        .find("select").attr("value","").end()
        .appendTo($("#myTbl"));
        var lastIndex=$(".inputautofill").size()-1; // หา index ของตัว input ล่าสุด
        // สร้าง input element เพื่อที่จะไปแทนที่ตัวเก่า
        $($(".inputautofill:eq("+lastIndex+")")[0].outerHTML)
        .insertAfter($(".inputautofill:eq("+lastIndex+")"))
        .autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
            minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
            source: "get_suggest.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
        });;
        $(".inputautofill:eq("+lastIndex+")").remove(); // ลบตัวเดิมออก หลังจากแทนที่ตัวใหม่แล้ว
    });
    $("#removeRow").click(function(){
        // // ส่วนสำหรับการลบ
        if($("#myTbl tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ
            $("#myTbl tr:last").remove(); // ลบรายการสุดท้าย
        }else{
            // เหลือ 1 รายการลบไม่ได้
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");
        }
    });
      
     $( ".inputautofill" ).autocomplete({ // ใช้งาน autocomplete กับ input text id=tags
        minLength: 0, // กำหนดค่าสำหรับค้นหาอย่างน้อยเป็น 0 สำหรับใช้กับปุ่ใแสดงทั้งหมด
        source: "get_suggest.php", // กำหนดให้ใช้ค่าจากการค้นหาในฐานข้อมูล
    });
 
  
});
</script>
  
  
</body>
</html>
 


   เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 07-06-2018


ดูแนวทางการประยุกต์เพิ่มเติมที่ ถามตอบ 

https://www.ninenik.com/forum_view_2720_1.html



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง



Tags:: autocomplete jquery jqueryui clone







URL สำหรับอ้างอิง












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