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

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

jquery ข้อความ

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

<?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>