PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

04 February 2009 By


<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 ข้อความ





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