입력 필드를 다시 텍스트로 변경하는 방법

행의 끝에있는 편집 버튼을 클릭하면 각 셀을 입력 필드로 만드는 스크립트와 스크립트가 있습니다. 편집 한 데이터를 Ajax를 통해 제출하지만, 편집 한 후에 입력 필드를 일반 텍스트로 되돌리고 싶습니다. 여기 입력 필드를 다시 텍스트로 변경하는 방법

코드입니다 :

//// EACH CELL INTO INPUT FIELD //// 
$(document).ready(function(){ 
     $(".edit").click(function(){ 
      var tr = $(this).closest("tr"); 

      tr.find(".td").each(function(){ 
       var name = $(this).attr("title"); 
       var value = $(this).html(); 
       var input = "<input type='text' name='"+name+"' value='"+value+"' />"; 
       $(this).html(input); 
      }); 

      var submit = "<input type='button' name='Submit' value='Submit' />"; 
      tr.find(".button").html(submit); 

     }); 
}); 
//// END //// 

//// ONCLICK SUBMIT SEND DATA VIA AJAX //// 
$(".button input[type=button]").live('click', function() { 
    var data = $('form#muuda').serialize(); 
    // post data using ajax                                           
    $.ajax({ 
    type: "POST", 
    url: "index.php?leht=kast", 
    data: data, 
    success: function(data) { 
     alert("Andmed muudetud"); // show response from the php script.                                   
    } 
    }); 
}); 
//// END ////

HTML :

https://lh6.googleusercontent.com/-vVnabdBzFlA/UBjTRhifpWI/AAAAAAAACAo/RvAgpi7x2ik/s488/Ajax%2520submit.jpg

출처

2012-08-01 mend

나는 [Edit In Place] (http://code.google.com/p/jquery-in-place-editor/)를 사용했습니다.이 텍스트는 jQuery 플러그인으로 텍스트를 클릭하면 갑자기 inputtextfield. 원하는 곳에 텍스트를 편집하고 "저장"및 "취소"버튼을 사용하여 텍스트를 저장하거나 이전 텍스트를 복구합니다. [이 데모 페이지의 예 1] (http://jquery-in-place-editor.googlecode.com/svn/trunk/demo/index.html)을 살펴보십시오. – ClydeFrog

당신은 당신이 사용하는 프로세스를 취소 할 수 있습니다 : 여기

<form id="muuda" method="post" action="#"> 
    <table> 

<?PHP 
$sql="SELECT * FROM nimed"; 
$result = mysql_query($sql)or die(mysql_error()); 
    WHILE ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { 
     echo '<tr class="row">'; 
      echo '<td class="td" title="id">'.$row["id"].'</td>'; 
      echo '<td class="td" title="eesnimi">'.$row["eesnimi"].'</td>'; 
      echo '<td class="td" title="perenimi">'.$row["perenimi"].'</td>'; 
      echo '<td class="button" title="button"><button class="edit">Edit</button></td>'; 
     echo '</tr>'; 
    } 
?> 

    </table> 
</form>

미리보기의 사진입니다 텍스트에서 입력 상자로 전환하려면

tr.find('.td').each(function() { 
    var value = $(this).find('input').val(); 
    $(this).html(value); 
});

변수 tr을 올바른 행으로 설정해야합니다.

출처

2012-08-01 07:18:42 Nick

입력 필드를 다시 텍스트로 변경하는 방법

답변

관련 문제