แก้ไขข้อความแบบทันที ด้วย jQuery
04 February 2009
<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>
ตัวอย่างผลลัพธิ์ คลิกที่นี้
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
19 Jan 11 อักขระคั่น (Delimiters) ในการใช้งาน Regular Expressions ของ PHP อ่าน 1072 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2697 01 Feb 10 การใช้งาน method delay() ใน jQuery 1.4 อ่าน 2731 30 Nov 10 การนำเสนอ และแสดงข้อมูล ด้วย jQuery Flexigrid Plugin เบื้องต้น อ่าน 4211 24 Mar 09 Database ข้อมูลจังหวัดและอำเภอในประเทศไทย อ่าน 6750 06 Aug 10 ตรึง หัวข้อ คอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์ อ่าน 2463 25 Sep 08 ฟังก์ชั่นเกี่ยวกับ วันที่ เวลา ใน javascript อ่าน 7132 27 Aug 10 เทคนิค jQuery สร้าง preloading page หรือ loading image ก่อนแสดงหน้าเว็บ อ่าน 4681 06 Jun 09 ใช้ css กำหนด media print ให้ ไม่แสดง ปุ่มสั่งพิมพ์ print หน้าเอกสารที่ต้องการ อ่าน 3471 24 Jun 11 แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE อ่าน 701 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 1871 30 Mar 09 ค้นหาและ hilight ข้อความในหน้าเว็บเพจด้วย jQuery อ่าน 2779 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 3992 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3253 25 Sep 08 รวมส่วนประกอบต่างข้างบนเป็น CSS อ่าน 3648 25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2680 26 Oct 08 การสร้างปุ่มยืนยันให้กับ ลิ้งค์ ด้วย function return confirm() อ่าน 3821 22 Apr 10 ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery อ่าน 5101 04 Oct 08 SQL คืออะไร อ่าน 7496 25 Sep 08 การแสดงข้อมูลจากตารางด้วย PHP อ่าน 5397