ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

แก้ไขข้อความแบบทันที ด้วย jQuery

04 February 2009 เขียนเมื่อ 17 ปีก่อน โดย Ninenik Narkdee

ข้อความ jquery

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

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

ดูแล้ว 13,946 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
if(count($_POST)>0){
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";	
	exit;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html{
		
}
body{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css สำหรับปุ่ม */
.okButton{
	border:1px groove #CCC;
	background-color:#390;
	color:#FFF;
	font-size:10px;
	margin-right:3px;
	cursor:pointer;
}
.cancelButton{
	border:1px groove #CCC;
	background-color:#FF0;
	color:#000;
	font-size:10px;
	margin-right:3px;
	cursor:pointer;
}
.editable_textarea{
	width:350px;
	height:100px;
}
</style>
<title>แก้ไขข้อความแบบทันที ด้วย jQuery</title>
</head>

<body>

<div style="margin:auto;width:550px;">
<p class="editable" id="data1">
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1<br />
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 
</p>
<p class="editable" id="data2">
ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2<br />
ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 <br />
test
</p>


<div id="consoleD" style="border:1px solid #CCC;background-color:#FFFFF0;color:#333;">

</div>
</div>


<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var tempVal=[];
$(function(){
	$(".editable").click(function(){
		var indexThis=$(".editable").index(this);
		tempVal[indexThis]=$(".editable").eq(indexThis).html(); 
		editalbeThis(indexThis);
	});	
	$(document).on('click','.cancelButton',function(){		
		var indexThis=$(this).parent(".editable").index();		
		$(this).parent(".editable").html(tempVal[indexThis]);
		$(".editable").eq(indexThis).click(function(){
			editalbeThis(indexThis);
		});
	});
	$(document).on('click','.okButton',function(){
		var indexThis=$(this).parent(".editable").index();		
		var newValue=$(this).siblings("textarea").val();
		var field=$(this).siblings("textarea").attr("id");
		$(this).parent(".editable").html(newValue);
		tempVal[indexThis]=newValue; 		
		$.post("swap_textarea.php",{
			"field":field,
			"value":newValue
		},function(data){
			$("#consoleD").html(data);
		});
		$(".editable").eq(indexThis).click(function(){
			editalbeThis(indexThis);
		});
	});	
});
function editalbeThis(index){
	var curThis=index;
	var gData=$(".editable").eq(curThis).text();
	var data=$("<textarea/>",{
		"name":$(".editable").eq(curThis).attr("id"),
		"class":"editable_textarea",
		"id":$(".editable").eq(curThis).attr("id"),
		"text":gData
	});
	var buttonUpdate="<br><button class="okButton">Update</button>";
	var buttonCancel="<button class="cancelButton">Cancel</button>";
	$(".editable").eq(curThis).unbind("click");
	$(".editable").eq(curThis).html(data).append(buttonUpdate).append(buttonCancel);	
}
</script>

</body>
</html>

DEMO 1

Tags:: ข้อความ jquery

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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน