PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

04 February 2009 By
jquery ข้อความ

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



<html>
<head>
<style type="text/css">
/* css สำหรับปุ่ม */
.iBT{
	border:1px solid #999999;
	background-color:#CCCCCC;
	color:#333333;
	font-size:10px;
	margin-right:3px;
}
</style>
</head>

<body>
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var iObj="p#iPragraph"; // กำหนดแท็ก p ที่มี id เท่ากับ iPragraph เป็นส่วนที่ต้องการใช้งาน
$(function(){
	$(iObj).click(function(){ // เงื่อนไขเมื่อมีการคลิกที่แท็กเริ่มต้น
		iChange();
	});

});
function iChange(){ // ฟังก์ชันสำหรับแปลงแท็กเริ่มต้นไปเป็น teatarea
		var iText=$(iObj).text();
		$(iObj).html("<textarea name='data1' id='forEdit' cols='50' rows='5'>"+iText+"</textarea>");
		$(iObj).unbind('click');
		$(iObj).append("<br><button id="uB" class="iBT" onclick="iUpdate()">Update</button><button id="cB" class="iBT" onclick="iUpdate()">Cancel</button>");
}
function iUpdate(){ // ฟังก์ชันสำหรับอัพเดทข้อความใน textarea
	var iText=$("#forEdit").val();
	$(iObj).html(iText);
	$(iObj).click(function(){
		iChange();
	});
}
</script>

<p id="iPragraph">
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 
</p>


</body>
</html>

ตัวอย่างผลลัพธิ์ คลิกที่นี้







Tags:: jquery ข้อความ






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


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