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

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

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





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

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"  เพื่อไว้เรียกใช้งาน

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

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

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

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

<input name="h_all_id_data" type="hidden" id="h_all_id_data" value="<?=$all_id_data?>" />
 
ส่วนของการบันทึกข้อมูล
 
 
<?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."' ;		
				");
			}
		}
		

	}
}
?>


 
 
โค้ดตัวอย่าง และคำอธิบาย แสดงตามไฟล์ เดียวด้านล่าง
 
<?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
 
<?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();  
}
 
ไฟล์ตัวอย่าง
 
<?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
 
<?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 ได้
 
<?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:: jquery clone autocomplete jqueryui







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












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