PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

06 March 2014 By


รูปแบบหรือลักษณะการทำงานของเนื้อหานี้คือ
 
- มีฟอร์ม สำหรับรับค่า โดยเราสามารถเพิ่ม ลบ หรือแก้ไขข้อมูลได้
- สามารถเพิ่ม ลบ แถวของชุดข้อมูล ที่ต้องการบันทึกได้
- การลบแถวของข้อมูล ในที่นี้จะลบจากด้านล่างสุดขึ้นมา 
  (หากต้องการลบแต่ละรายการ แบบเลือกลบ รายการเองได้ 
   สามารถเพิ่มโค้ดคำสั่ง หรือปุ่มจัดการอื่นๆ เข้าไปตามต้องการ)
- ข้อมูลจะมีการบันทึก เมื่อกดปุ่ม 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>
 

Tags:: jquery clone





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